Extend a live website draft with React/TSX, canvas, WebGL, Three.js, particles, data visualization, or other code-backed interaction when HTML and Motion are not enough.
Where: Flowgen → Add → Generate → Website → Code
Key ideas
- Code for real behavior: Use Code for stateful components, canvas/WebGL/Three.js, particles, live data, or generative behavior—not as a substitute for normal semantic layout and CSS.
- Selectable integration: The generated code element should remain isolated from the editor shell while its content/placement stays selectable in the resulting f0 document.
- Draft-aware revision: Code receives the upstream live draft and emits a revised draft, so later layout/editor work can continue around the interactive element.
- Web Code Gen card: WebCodeNode uses the authored shared-card path. Add a code-backed interactive layer to a live web draft while preserving other layers.
- Properties sidebar: WebNodePanel.tsx
- Opened surfaces: Full-page preview; reasoning
Steps
- Connect the upstream HTML/Motion draft to Code draft_in.
- Describe the behavior, inputs/data, visual bounds, interaction states, responsiveness, loading/error behavior, and performance constraints.
- Run and test interaction, resize, cleanup, and failure states in the preview.
- Connect draft_out to Section/Document Editor and reopen the final editor to verify selection, layout, and published behavior.
Shared authored card and inspector
- Prompt, Skill, Reference, Assets, Draft, Design System, and Review inputs.
- Code task, model, media, responsive/review controls, and versions in WebNodePanel.
- code_out carries the code layer; draft_out preserves the live authoring document.
Opened surfaces
Open full-page preview and reasoning. Use Custom Code when a manually editable TSX/socket implementation is required.
Web Code Gen controls and presets
- Add path: Flowgen → Add → Website → Web Code Gen.
- Card: WebCodeNode.
- Properties: WebNodePanel.tsx.
- Controls: Prompt; Skill; Reference; Assets; Draft; Design System; Review; model/responsive/versions.
- Opened surfaces: Full-page preview; reasoning.
Limitations and important notes
- Generated code still needs security, accessibility, performance, responsive, cleanup, and browser testing.
- Prefer ordinary HTML/CSS/Motion when no scripted runtime is needed.
Troubleshooting
The interactive element breaks the surrounding page
Check that code is scoped to its own root, does not query or rewrite the editor/document globally, cleans up listeners/animation loops, and has explicit dimensions.