xyflow / web Goto Github PK
View Code? Open in Web Editor NEWπ This monorepo contains the xyflow website and the documentation sites for React Flow and Svelte Flow.
Home Page: https://xyflow.com
License: MIT License
π This monorepo contains the xyflow website and the documentation sites for React Flow and Svelte Flow.
Home Page: https://xyflow.com
License: MIT License
By having the API docs be purely reference material, it can be hard for users to discover slightly buried things like the NodeProps
type that tells you what props are passed to a custom node.
To keep the API docs a strict reference, we think it would be useful to rethink the current "Guides" sidebar on the docs to group things based on their category or concept and then also link out to relevant API reference too.
Instead of:
We could have
With the current React Flow docs site, we hand-maintain an object that contains the type information for things like interfaces and functions and then use that to render an API reference. It'd be much nicer if we could derive that object as JSON by just parsing the modules we care about documenting.
This kills two birds with one stone because it'll encourage us to better document the source code!
I did some initial experimentation with TSDoc, which seemed ideal because it even had a built-in JSON export option. Unfortunately it seems entirely geared up to work at the level of "packages" rather than on individual modules, and I fear that may just be overkill.
Ideally we have a local utility package that let's us do xy-export-types react/types/edges
and we get just the types in that module back as JSON. Unfortunately that means the path forward looks like...
The good news is you can import typescript as a package and start calling the compiler, walking the AST, etc straight from any ol' script: https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API
The bad news is the compiler API is basically undocumented and quite complicated.
Here's the todo list in order-ish of complexity:
interface
s.const
s.type
s including union types.As a first-pass I'd like to end up with output like this:
[ { "kind": "interface"
, "name": "EdgeLabelOptions"
, "docs": "..."
, "fields":
[ { "name": "label", "type", "string | ReactNode", "optional": true }
, ...
]
}
]
On a second go round I'd like a better representation for referenced types, so we can generate links and all that.
This issue is frustrating because there are a couple of tools out there but they seemed far more geared towards generating entirely automated docs sites, but we have Opinions about how to show off our API reference that make these unsuitable.
Opening this so I can keep track of what I'm up to and abandon it if it's eating too much time.
I'm not super happy with how our current API reference is organised; although it surfaces all the important information quickly it does so in a seemingly unstructured way. I want to use this issue to collect some references of other package and API docs and see if we can come up with something clearer.
These ones are not so relevant to us (we're not documenting a HTTP API) but I still find the way they present information interesting.
the newly published blog post from our old website should be available in the new one. https://reactflow.dev/blog/svelte-flow-alpha-xyflow/
I want to implement full diagram PNG export.
The documentation contains an example using html-to-image library about downloading the diagram as PNG:
Unfortunately, the image downloaded from the example is cropped on large diagrams. This should not happen judging by the comment:
// we calculate a transform for the nodes so that all nodes are visible
In addition the image is very pixelated.
Setting pixelRatio: 4
seems to fix the pixelation, but I was unable to stop the image cropping.
The documentation should contain an example on downloading full diagram as PNG that:
instead of xyflow |Β react |Β svelte -> xyflow | React Flow | Svelte Flow
It's confusing that width
and height
can be passed as node options but they don't have any effect. The recommended way of passing an initial size to a node is to set the style
option. Maybe we can document that somewhere?
Make it a bit more interesting by showing three handles at the bottom (green/orange/red) - depending where you start the edge, the connection line should be green, orange or red.
Currently we can't display svelte examples on our website. We wanted to use sandpack / codesandbox but for some reasons it doesn't work.
I opened an issue in the sandpack repo codesandbox/sandpack#961 and one in the codesandbox-client repo codesandbox/codesandbox-client#7750 . My hope is that by updating their internal Svelte transpiling pipeline the issues just go away, but that's not for sure. For now I would like to wait for another one or two weeks and see if there is any progress with those issues. On Discord they told me that someone will look into it.
If there are any other ideas besides embedding a Stackblitz iframe, here is the place to collect those ideas.
it seems like the layouting guide is missing in the new docs: https://xyflow-docs-staging.vercel.app/react-flow/docs
The current dagre example initialises the layouting graph just once and will not work if new nodes are added or removed.
We should either clarify this limitation of the example (and suggest how one may overcome it) or update the example to work on dynamic graphs.
I think these can be fixed by removing the <Link />
component within a <ContentGridItem />
that has a route prop (for example in LibraryCards
).
Not sure what's the best way to configure the Next image components in the showcase slider.
with the new release, we are introducing CSS variables as another option to customize the default styling of xyflow. We should document the available variables somehow:
--edge-stroke-default: #b1b1b7;
--edge-stroke-width-default: 1;
--edge-stroke-selected-default: #555;
--connectionline-stroke-default: #b1b1b7;
--connectionline-stroke-width-default: 1;
--attribution-background-color-default: rgba(255, 255, 255, 0.5);
--minimap-background-color-default: #fff;
--background-pattern-dot-color-default: #91919a;
--background-pattern-line-color-default: #eee;
--background-pattern-cross-color-default: #e2e2e2;
--node-color-default: inherit;
--node-border-default: 1px solid #1a192b;
--node-background-color-default: #fff;
--node-group-background-color-default: rgba(240, 240, 240, 0.25);
--node-boxshadow-hover-default: 0 1px 4px 1px rgba(0, 0, 0, 0.08);
--node-boxshadow-selected-default: 0 0 0 0.5px #1a192b;
--handle-background-color-default: #1a192b;
--handle-border-color-default: #fff;
--selection-background-color-default: rgba(0, 89, 220, 0.08);
--selection-border-default: 1px dotted rgba(0, 89, 220, 0.8);
--controls-button-background-color-default: #fefefe;
--controls-button-background-color-hover-default: #f4f4f4;
--controls-button-color-default: inherit;
--controls-button-color-hover-default: inherit;
--controls-button-border-color-default: #eee;
--controls-box-shadow-default: 0 0 2px 1px rgba(0, 0, 0, 0.08);
Before publishing it, we should add some more context and information to the repo and explain what you can do with it.
When adding a component inside of a case study markdown file, an error is thrown. Maybe because it's inside of the component?
See commit (this code throws the below error): bf8b12a
Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Trying to make this change to make the answer text in the Case Studies more easily scannable, referencing style of interviews like this one
urls linking to pro platform and svelte examples are currently hardcoded. To have an encapsulated staging and production environment we should link these urls should be set in vercel for each environment seperately
The demo code on https://reactflow.dev/docs/examples/overview/ does not run correctly on the latest version because of the missing width and height
No response
npm init react-app <app_name>
App.js
and initial-elements.js
from https://reactflow.dev/docs/examples/overview/npm start
What's shown in the feature overview
The app worked after adding the height
No response
Mastodon, Bluesky, Twitter, and Discord links should be in the footer
Contact should also be there!
Our blog post previews are the classic "buttons that work like links". I found this really surprising when, for example, cmd+clicking one of these cards didn't open a new tab but instead navigated the current tab.
I think it would be better if the whole card were an anchor rather than the Read more
(which incidentally cmd+clicking on will still navigate the current page).
We need more space for the content sections of the Docs/API/Examples. How can we break out of the max width of the page. Is there any way to define the max width on page level?
Mastodon, Bluesky, Twitter, and Discord links should be in the footer
Contact should also be there!
Investigate which service is suitable for us and connect our contact forms (general + enterprise) to it.
We need to find a way to define a separate index for React Flow and Svelte Flow, so that you only get Svelte related results when you are under /svelte-flow.
Ideas to solve this:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.