Surfaces

MockIDE

Real code is coming. This is the trailer.

Mock IDE that streams pretokenized code character-by-character with a blinking caret. Pass an array of `IdeToken` objects; each has a class hint for color (key, str, num, com, fn).

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/mock-ide.json

Examples

Streaming TS handler

~/synthetica/app/api/route.ts AI is writing…

<MockIDE
  filename="~/synthetica/app/api/route.ts"
  tokens={[
    { c: "// generated by synthetica\n", cls: "com" },
    { c: "export async function ", cls: "key" },
    { c: "POST", cls: "fn" },
    { c: "(req: Request) {\n" },
    // …
  ]}
/>

Props

Prop	Type	Default	Description
filename	string	-	Shown in the tab.
tokens	IdeToken[]	-	Source tokens to type out.
loop	boolean	true	Restart after a 3s pause.
charMs	[number, number]	[14, 42]	Per-char delay range.
thinkingLabel	Snippet \| false	"AI is writing…"	Pill label; false to hide.

MockIDE.Chrome

Prop	Type	Default	Description
filename	string	-	Tab label.
thinking	Snippet \| false	-	Pill content.

MockIDE.Body

Prop	Type	Default	Description
tokens*	IdeToken[]	-	Tokens to stream.
loop	boolean	-	Loop after finishing.

Next ChatBubble ] →