This monorepo contains our team website and the docs for our libraries.
We're using Turborepo to manage this monorepo because there's a lot going on.
The apps directory contains projects that run on the backend or applications we might want to run during development:
apps/svelte-examples
is a SvelteKit app that contains all the examples we use
throughout our Svelte docs. We like to use sandpack
for our React examples but it doesn't support Svelte yet, so we built our own
example viewer!apps/xy-styleguide
is a a Storybook app that
tries to document and demo all the components in our packages/xy-ui
package.The packages in this monorepo are reusable self-contained bits that we want to share across our apps and websites. Much of it is configuration for the different tools we use:
packages/eslint-config-xyflow
packages/xy-tailwind-config
packages/xy-tsconfig
packages/xy-ui
is a React component library that contains any components that
we want to share across our websites. The package encompasses everything from
page layouts, UI building blocks, and complex widgets. We use often use
Shadcn when looking to add new components, and we style
everything with Tailwind.Each directory in the sites folder is a separate website that we deploy. The name of the directory always corresponds to the domain name of the website:
sites/reactflow.dev
is the documentation site for React Flow. It, and the
rest of sites, are built with Nextra and
Next.js.sites/svelteflow.dev
is the documentation for our newest library, Svelte Flow.sites/xyflow.com
is the new home page for our organization. It contains our
blog and some information on how we approach open source development.To run any of the websites locally, you'll first need to install the dependencies and packages. We recommend using pnpm to manage your dependencies.
pnpm install
If you take a peek in package.json
you'll see we have a few different scripts
to run our apps. If you just want to run everything at once, you can just do:
pnpm run dev
To run the two documentation sites you can use:
pnpm run dev:docs
For everything else, there is an individual script to run each app independently:
pnpm run dev:reactflow.dev
pnpm run dev:svelteflow.dev
pnpm run dev:xyflow.com
pnpm run dev:style
We have a database of projects that use our libraries stored in notion. Both the React Flow and Svelte Flow sites have a script that will generate the JSON used to populate those showcases that you will need to run if you change or update the showcases in notion.
Navigate into either sites/reactflow.dev
or sites/svelteflow.dev
and run:
pnpm write-showcases
[!IMPORTANT]
You must have a.env
file in the project with a key calledNOTION_API_SECRET
for this script to work.
There is a little helper script that pulls the latest release from Github and creates a new what's new page with the release notes as the new content.
pnpm whatsnew
You might want to adjust the author and check the actual content before you push the changes to Github.
There is a Github action that checks the latest React Flow and Svelte Flow versions daily and creates a PR if there is a new version.
React Flow and Svelte Flow are open-source MIT-licensed libraries, and it will be forever. Our libraries enable thousands of solo developers and organizations like Stripe and Linkedin to build their node-based apps. With so many active users, it takes time and effort to maintain the library, docs, and community. We canβt do that without your support.
Why Subscribe? With your subscription, you are ensuring the sustainable maintenance and development of both React Flow and Svelte Flow. This is how we make sure these libraries stay MIT-licensed. In return, you get high-quality, maintained, updated libraries, along with benefits like direct support, prioritized feature requests, and access to our Pro Examples.
We're happy to try and answer any questions you have about our libraries. We're also always excited when folks want to share their projects with us. There are a few ways you can get in touch: