Services · FyUI
In pipelineDesign a component once — every state, every width.
FyUI's Blueprint editor lays a UI component out as its parts, then lets you style each part, set how it looks when it's hovered, focused or disabled, decide what changes at each screen width, and check it for accessibility. Then it writes the code — for React, Vue, Svelte or plain HTML.
- 36 presets to start from
- 12 states, variants, 6 breakpoints
- Code for five targets
- 01Structure
- 02Style
- 03States
- 04Responsive
- 05Preview
- 06Code
01 · At work
Start from a preset, make it yours.
Pick what you're building, choose a preset, then select a part on the canvas and restyle it — and give it a hover state while you're there.
Illustrative blueprint
02 · Responsive
One component, six widths.
- 01Six breakpointsXS for small phones up to 2XL for wide screens (1536px and up), previewed at each width as you switch.
- 02Rules, not copiesAdd a rule — hide, show, reorder or restyle a part — at a breakpoint, going up or down.
- 03One blueprintThe rules live on the component, so there's one thing to keep up to date.
03 · Accessibility
Checked while you build.
- 0111 rules, on every changeMissing labels, small touch targets, contrast and more — each with its WCAG criterion.
- 02A fix for eachEvery finding says what to change; make the change and the score on the toolbar moves.
- 03A warning, not a gateIt's a static check of the blueprint — it tells you, and leaves the decision to you.
04 · Code
The code, five ways.
- 01Pick your stackReact with Tailwind, React with CSS Modules, Vue 3, Svelte, or plain HTML and CSS.
- 02Read it in Code modeSwitch tabs to compare targets, with TypeScript on or off when you export.
- 03Copy it inCopy to the clipboard and paste it into your project.
05 · Yours
Kept in your browser.
- No account and no sign-in in the editor as built
- Blueprints are saved in this browser as you work
- Structure, style and states edited on one canvas
- 26 animation presets and an animation timeline
06 · Plainly
What it does, and what it doesn't yet.
01
In the pipeline
FyUI is planned, and not yet built out for use. What's on this page is the editor as it stands; join the waitlist to hear when it opens.
02
One browser
Blueprints live in the browser you made them in — there's no cloud save or sharing yet, and clearing site data clears them.
03
Copy, not download
Export copies code to the clipboard; a file or zip download isn't built.
04
Tokens are early
You can import a set of design tokens, but they aren't yet bound into styles or written into the exported code.
05
Coming soon
Storybook stories and test files are listed in the export dialog as coming soon.
07 · Questions
Asked and answered.
Can I use FyUI now?
Not yet. FyUI is in the pipeline — planned, and not yet built out for use. Join the waitlist and we'll tell you when it opens.
Where are my blueprints saved?
In your browser's local storage, on this device. Nothing is sent to Fyboard to be stored.
Which frameworks does it export?
React with Tailwind, React with CSS Modules, Vue 3, Svelte and vanilla HTML and CSS, copied to your clipboard.
Does the accessibility check make my component compliant?
It catches common problems early — 11 rules with WCAG references — but it's a static check of the blueprint, not an audit of your finished product.
FyUI · a Fyboard service
Blueprint a component.
In the pipeline — join the waitlist to hear when FyUI opens, and blueprint your first component then.