This monorepo contains our team website and the docs for our libraries.
- xyflow.com - our team website and blog
- reactflow.dev - the website and documentation for the React Flow library
- svelteflow.dev - the website and documentation for the Svelte Flow library
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-examplesis 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-styleguideis a a Storybook app that tries to document and demo all the components in ourpackages/xy-uipackage.
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-xyflowpackages/xy-tailwind-configpackages/xy-tsconfigpackages/xy-uiis 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.devis the documentation site for React Flow. It, and the rest of sites, are built with Nextra and Next.js.sites/svelteflow.devis the documentation for our newest library, Svelte Flow.sites/xyflow.comis 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 installIf 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 devTo run the two documentation sites you can use:
pnpm run dev:docsFor everything else, there is an individual script to run each app independently:
pnpm run dev:reactflow.devpnpm run dev:svelteflow.devpnpm run dev:xyflow.compnpm 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-showcasesImportant
You must have a .env file in the project with a key called NOTION_API_SECRET
for this script to work.
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:
- Use the contact form on our website.
- Drop us an email at info@xyflow.com
- Join our Discord server