For developers

Component studio

Describe a UI component and watch it built live, then change it in words and tune its motion by hand.

FreeMac

Choose an example to copy it, then try it in Jevie.

Use itHow it worksLimitsWhere it's kept

Use it

• build a component: a download button that turns into a progress ring, then a checkBuilt live in the studio
• make a component for a toast that slides up from the bottom
• design a pricing card componentprototype an animated toggle componentAny of build, make, design, prototype, draft
• open the component studiostudiocomponent builderThe last component, ready for a change
• In the studio: say a change (make the ring thicker); Select (p) a part first to change only it
• Drag a duration, pick an easing, then Keep these valuesWritten into the CSS
• Code (c)The HTML, CSS and JS in tabs, editable
• Replay (r)Run the preview from the start; Light shows it on a light page
• CopyThe whole component as one HTML file, tokens included

How it works

Describe a component and the studio builds it in front of you, with a timer, in plain HTML, CSS and JS that moves on Jevie's own motion tokens. Every animation becomes a control: sliders for durations and distances, a picker for curves, so you tune the feel by hand and keep what you like. Each draft gets a motion score in the header, with what to fix listed under it. If you installed the transitions.dev skill, its matching recipes guide the build.

Limits

• One component at a time, about a minute per build or change; only the last is kept, with no history.
• Plain HTML, CSS and JS; no React or packages.
• Only animations the model marks get controls; the preview is sandboxed from Jevie, your files and the network.
• The studio needs Jevie running; a page left open across a restart must be reloaded.

Where it's kept

The last component in ~/.jevie/component.json; the page at http://127.0.0.1:63798/component.

In Jevie, help component answers from this page as you type.

Related

Updated 23 October 2026 · Something wrong or missing? Tell us