# DrawnUI Fiddle

> In-browser playground for two languages on one engine: C# compiled with Roslyn on WebAssembly and drawn by DrawnUI, or React (TSX) compiled in the browser and drawn by DrawnUi.React on CanvasKit. Both render live on a Skia canvas. Zero server. AI agents can drive it programmatically.

## Skills (for AI Agents)

- [Fiddle driving skill](https://drawfiddle.com/skills/drawnui-fiddle/SKILL.md): window.fiddle API, snippet contract, screenshot rules, DOM test ids
- [DrawnUI fluent C# skill](https://drawnui.net/skills/drawnui-fluent/SKILL.md): fluent code-behind composition patterns — the style fiddle snippets should use
- [DrawnUI framework skill](https://drawnui.net/skills/drawnui/SKILL.md): controls, layouts, caching, gestures — deep framework guidance
- [DrawnUI for React skill](https://helloreact.drawnui.net/skills/drawnui-react/SKILL.md): the TypeScript port — JSX tags, props, hooks, engine classes

## Quickstart for agents

Open https://drawfiddle.com/ in a real browser (app is WebAssembly — plain HTTP fetch returns only the loader shell). Then:

1. Poll `window.fiddle && (await fiddle.getState()).ready === true` (cold start 10-20s).
2. `await fiddle.setCode(code)` — code is a C# method body that returns a SkiaControl. Never simulate keystrokes into the Monaco editor.
   For React: `await fiddle.setCode(tsx, "tsx")` — a module whose default export is a component; the language argument switches the editor to the React engine first. `(await fiddle.getState()).lang` is "csharp" or "tsx", and `fiddle.listPresets()` returns `{slug, name, lang}` for both.
3. `await fiddle.run()` -> { success, errors, status }; errors are "L<line>: message" in editor coordinates.
4. `await fiddle.getConsole()` -> Console.WriteLine output lines.
5. Canvas pixels: compositor element screenshot of [data-testid="fiddle-canvas"]. canvas.toDataURL() is always blank (WebGL, preserveDrawingBuffer:false) — do not use.
6. Verifying success: run() returning { success: true } means compiled AND rendered to canvas. DOM cross-checks: [data-testid="fiddle-status"] shows "Compiled and rendered", [data-testid="fiddle-errors"] exists only when there are errors. Runtime behavior evidence: Console.WriteLine in your snippet -> getConsole().

## MCP server

`https://drawfiddle.com/mcp` — Streamable HTTP, JSON-RPC, no account and no key. Tools: `search_snippets` (find a working example by words or tag), `get_source` (the complete C# of one snippet), `create_fiddle` (publish code, get a permanent link), `get_preview` (the rendered frame of a snippet). Server card: `https://drawfiddle.com/.well-known/mcp/server-card.json`.

    claude mcp add --transport http drawnui-fiddle https://drawfiddle.com/mcp

## Markdown, without a browser

Every page with a text form serves one. Send `Accept: text/markdown`, or append `.md`:

- `https://drawfiddle.com/index.md` — the whole community catalogue, one page
- `https://drawfiddle.com/show/<id>.md` — one snippet: title, description, links, C# source
- `https://drawfiddle.com/c/<id>.md` — just the C#
- `https://drawfiddle.com/openapi.json` — the public read API, described
- `https://drawfiddle.com/.well-known/ai-catalog.json` — every machine-readable entry point here

## HTTP API (no browser needed)

Create and read fiddles with plain HTTP. Compilation always happens in the visitor's browser, so the API cannot verify that code compiles — test in the browser flow above first when correctness matters.

- `POST https://drawfiddle.com/api/share` — JSON body `{ "code": "<C# method body, or TSX module>", "lang": "tsx" (optional; omit for C#), "bg": "#RRGGBB" (optional canvas background), "png": "<base64 PNG/JPEG thumbnail>" (optional), "desc": "<plain-text description, max 200 chars, HTML stripped>" (optional; shown on link previews, the editor and the Community card) }`. Max code 100 KB. Returns `{ "id": "...", "url": "https://drawfiddle.com/f/<id>" }`. Id is derived from the code (same code = same id, idempotent); a React id carries an `r` prefix. Entries live 60 days after last access. A React snippet shared through the API has no transpiled module yet, so `/p/<id>` sends the visitor to the editor, which compiles it — share from the browser flow above to get a player that runs straight away.
- `GET https://drawfiddle.com/api/share/<id>` — the C# source as text/plain (headers `X-Fiddle-Bg` = background, `X-Fiddle-Desc` = URL-encoded description, when set). 404 if unknown.
- Editor lives at `https://drawfiddle.com/app` (the root `/` is the landing + community feed). Links for humans: `https://drawfiddle.com/f/<id>` (editor + live preview), `https://drawfiddle.com/p/<id>` (standalone player, canvas only, iframe-embeddable), `https://drawfiddle.com/c/<id>` (read-only highlighted source, no WASM).
- Embed: `<iframe src="https://drawfiddle.com/p/<id>" style="width:100%;height:100%;border:0"></iframe>`

Example:

    curl -s -X POST https://drawfiddle.com/api/share -H "Content-Type: application/json" -d '{"code":"return new SkiaLabel { Text = \"Hello\" };"}'

## Full context

- [llms-full.txt](https://drawfiddle.com/llms-full.txt): this file plus the complete fiddle driving skill in one fetch

## Source

- [DrawnUI](https://github.com/DrawnUi/DrawnUi.Net): the rendering engine