DrawFiddle guide

Last updated 6 October 2026

This guide explains everything you can do on DrawFiddle. The names of buttons and menus are written exactly as you see them on the site. Use your browser search to find any button name on this page.

1. What DrawFiddle is

DrawFiddle is where you create drawn UI you can use: widgets you publish on the web, and drawn snippets that you put into your own app, in any framework DrawnUI supports. It is also a playground to learn DrawnUI quickly and, in .NET, drawing with SkiaSharp.

Create widgets and publish them

Make a chart, a price card, a product configurator, a small game or an animated banner. Then publish it on the web:

• A link. Anyone can open it on any device. Nothing to install.
• A widget on any website. You paste one iframe into the page. The widget can read values from its address, load JSON data and tell your page when someone taps a button (chapter 19).
• A standalone web app with its own address (chapter 17).

Create snippets for your app

The code you write here runs without changes in every framework DrawnUI supports. Export it as a ready project (chapter 11), or copy it into your own app:

DrawnUI draws every control itself with Skia. So your UI looks the same in all of them.

A playground to learn DrawnUI and SkiaSharp

You do not install anything and you do not create a project. Open a sample and change a line. The result updates while you type. You get code completion and error hints, like in your IDE. The samples show layouts, long lists, shaders, animations, text editing and data from the web.

For .NET developers it is also an easy way to practise SkiaSharp drawing. The Raw sample draws on a plain SkiaSharp canvas. The SKSL sample lets you change a shader and see the result immediately.

You can write in C#, React (TSX), Rust or NX. The controls and their names are the same in all four. Writing, sharing, embedding and exporting are free. Rust compiles on our server, so it needs a free account (chapter 6). Premium adds standalone web apps (chapter 17).

2. Quick start

1. Open drawfiddle.com/app. Or press Create with .NET, Create with React, Create with Rust or Create with NX on the home page.
2. Wait until the text next to the toolbar says Compiler ready. The Welcome sample appears on the right.
3. Change something in the code, for example a text or a colour. The result updates by itself when the code has no errors. You can also press ▶ Run or Ctrl+S. In Rust, the result updates only when you press ▶ Run or Ctrl+S.
4. Try other samples with the buttons above the code.
5. To save your work, open Export Web and choose Share as Fiddle. A link is copied. Anyone who opens it sees your code and the result. If you are signed in, the fiddle is also saved in Account → My fiddles.

3. The editor

The editor is at drawfiddle.com/app. An address like /app/weather or /app/cells opens the editor with that sample.

The top bar

• DrawFiddle (the logo) goes back to the home page.
• Login opens the sign-in window. After you sign in, the button shows Account. See chapter 15.
• About shows short tips and links: drawnui.net, GitHub, this guide, the Terms, the Privacy notes and the forum. The last line shows the DrawnUI and SkiaSharp versions the site uses.
• When we release a new version of the site, a window shows Publish update N is out, with Reload and Later. The page does not reload by itself, because you would lose unsaved code. Share or copy your code first, then press Reload.

Samples

The row of buttons above the code loads the samples of the current language. In C# they are: Welcome, UI, Effect, Cells, Kids, Looks, Spinner, Editor, Data I/O, Weather, Glass, Custom, SKSL and Raw. React, Rust and NX have their own samples. Many of them do the same thing as a C# sample. You can change a sample as much as you want. The original does not change.

When you open a fiddle from a link, this row shows two other buttons: ← Home (back to the Community) and Presets (back to the samples).

Description, tags and params

• Description: the field above the code, up to 200 characters. People see it on the Community card and in link previews in chats. Write it before you share.
• Tags: up to 5 words. The Community page uses them as filters. See chapter 14.
• Params: test values for Fiddle.Query, written like the end of a web address (city=London&values=3,5,8). They are not saved with the fiddle. A published app reads the values from its real address. See chapter 19.

Code and canvas

The code is on the left. The canvas, where your code draws, is on the right. Drag the line between them to change their width. Drag the handle below them to change the height. On a small screen (less than 900 pixels wide) the code is above and the canvas is below.

Click the canvas to send the keyboard to your app. Then the arrow keys, Space, Page Up, Page Down, Home, End and Tab go to your app (for example a text field or a game). They no longer scroll the page. Click the code to send the keyboard back to the code.

The toolbar, from left to right

Errors and the console

Compile errors are listed in red under the toolbar. The same errors are underlined in the code.

The Console at the bottom shows what your code prints: Console.WriteLine in C#, console.log in TSX, println! in Rust, a Log action in NX. It also shows Fiddle.Emit events (⚡), Fiddle.Open requests (↗) and failed Fiddle.Load calls (⚠), see chapter 19. Clear empties the console.

4. Writing C#

Your code is the inside of a method that returns the control to draw. You do not write a class, a namespace or using lines:

return new SkiaLabel { Text = "Hello", TextColor = Colors.White,
                      HorizontalOptions = LayoutOptions.Center };

• Ready to use: System, System.Linq, System.Collections.Generic, DrawnUi, DrawnUi.Draw, DrawnUi.Views, DrawnUi.Controls, AppoMobi.Gestures, AppoMobi.Specials and SkiaSharp. If you need more, add using lines at the top.
• You can declare types: a class, a record or your own control can stand next to your code. It is compiled together with it. So a sample that needs its own control works here without changes.
• Real errors: this is the real C# compiler. You get the same errors as in Visual Studio or Rider.
• The same code works in your app: in .NET MAUI, WPF, OpenTK or Blazor, without changes. Export .NET creates such a project for you.
• Shared fiddles open fast: we keep the compiled result of a shared fiddle. When someone opens its /p/ link, their browser usually does not need to compile it.

5. Writing React (TSX)

Choose TSX in the language switch. Your browser compiles the TSX code. It is drawn by DrawnUI for React, which is the same engine written in TypeScript. The controls, their properties and the layout rules are the same as in C#.

• Your code is a module: use export default for a component or an element. The editor creates the Canvas around it, like it does in C#.
• The tags are the controls: <SkiaLayout Type="Column">, <SkiaLabel>, <SkiaButton>, <SkiaShape>, <SkiaScroll> and more. Properties start with a capital letter: HorizontalOptions, UseCache, Padding.
• Engine classes are in Core, for code that creates controls itself, for example a list cell: new Core.SkiaLabel({ ... }). useState, useEffect and the other hooks are ready to use. console.log writes to the console.
• IntelliSense uses the real type definitions of the package. Type errors are warnings and do not stop the run. Syntax errors stop it.
• No .NET download: a React fiddle opens in about one second.
• React links start with r. This tells the site which engine to start.
• Not available for React: Export .NET, and the AOT and server apps.

DrawnUI for React has layouts, scrolling lists, labels, shapes, images, SVG, buttons, switches, sliders, progress bars, carousels, drawers, text editors, animations, Lottie and gestures. You can see them at helloreact.drawnui.net. In your own project, install it with npm i drawnui-react.

6. Writing Rust

Choose Rust in the language switch. Your code is drawn by DrawnUI for Rust, which is the same engine written in Rust. The controls, their properties and the layout rules are the same as in C#.

use drawnui::prelude::*;

#[derive(Default)]
struct App {
    count: i32,
}

fn build(_app: &mut App) -> Build<SkiaLayout> {
    SkiaLayout::column().spacing(12).children((
        SkiaLabel::new("").font_size(20).text_color(Color::WHITE)
            .observe(|me, app: &App| me.set_text(format!("Clicked {}", app.count))),
        SkiaButton::new("Click me").on_tapped(|_me, app: &mut App, _cx| app.count += 1),
    ))
}

• Your code has a struct App with Default, which holds the state, and a fn build, which returns the controls. It can also have a fn configure for settings of the whole app. The editor writes the rest.
• It compiles on our server, because a browser cannot compile Rust. Press ▶ Run or Ctrl+S. The code does not run while you type, and there is no HotReload. A build takes a few seconds.
• You need an account: sign in to compile (chapter 15). A free account has 30 builds a month. Builds with errors do not count. Premium has no limit. Code that was compiled before (the samples, shared fiddles, your own earlier code) shows at once and does not count.
• Real errors: these are the errors of the Rust compiler, underlined in your code. If your code panics, the message appears on the canvas.
• Printing: println! writes to the console.
• Your files: images, SVG, Lottie and shaders from Resources, as assets/<file name>. A font by its name, .font_family("MyFont"). See chapter 8.
• Sharing: run your code before you share it. A shared Rust fiddle opens with its compiled result: nothing compiles, and no .NET is downloaded.
• Export Rust creates a project for Web, Windows, Linux, Android, iOS or all of them, see chapter 11.
• Not available for Rust: Export .NET, Export Component and Premium apps.

DrawnUI for Rust has layouts, scrolling lists, labels, shapes, images, buttons, switches, sliders, carousels, text editors, animations, shaders and gestures. You can see them at hellorust.drawnui.net. In your own project, add the drawnui crate from crates.io.

7. Writing NX

NX is a separate language. It is not C# and not TypeScript. Your browser compiles it, and it draws with the same engine as TSX. The language is described at nx-lang.github.io/nx. Here is how it works on DrawFiddle.

action Log = { text:string }

component <App /> = {
  state { taps:int = 0 }

  <SkiaButton Text={"Tapped " + taps + " times"}
              onTapped=<Update taps={taps + 1} /> />
}

<App />

• The last element is the drawing: the last element at the top level appears on the canvas.
• The controls are the DrawnUI controls, with the same names and properties as in C# and TSX.
• State and events: a component can have state. Each use of a component has its own state. When a child sends an action, the handler of its parent runs, and the drawing updates.
• Printing: send an action named Log with a text. The text appears in the console.
• Long lists: declare TItem, ItemsSource and ItemTemplate. Only the rows on the screen are drawn. The Cells sample shows a list of 100,000 rows.
• Small download: NX loads only when you choose it. A shared NX fiddle does not even load the NX compiler.
• Not available for NX: project exports and Premium apps.

8. Your files: Resources

The Resources panel under the code holds files that your code can use: images, Lottie .json animations, .sksl shaders, .svg files and fonts (.ttf, .otf). Press + Add file. Then use the file name in your code, for example Source = "logo.png". A font has two names, with and without the extension: FontFamily = "MyFont" or FontFamily = "MyFont.ttf". The × on a file removes it. The code runs again after you add or remove a file.

• Some sample files are always there: a car, a loading animation, a texture, a photo and the DrawnUI logo.
• You can add up to 20 files at the same time. Each file can be up to 8 MB.
• Your files are saved with the fiddle, up to 3 MB in total (25 MB with Premium). If they are bigger, only the code is shared, and the status line tells you.
• A free fiddle with your own files is deleted after 3 days without visits. See chapter 23.
• Exported projects include your files.
• In Rust, write assets/ before the file name: SkiaImage::new("assets/logo.png"), SkiaSvg::new("assets/drawnui.svg"), SkiaLottie::new("assets/loader.json"). A font works by its two names, as in C#: .font_family("MyFont") or .font_family("MyFont.ttf"). Press ▶ Run after you add a file.

9. Export Web: share your fiddle

The Export Web menu has everything to share your fiddle or put it on a page. All of it is free. If you are signed in, what you create is also added to your account (chapter 16).

While the link is created, the menu shows Creating your short link…. Then the status line shows the result, for example ✓ Link copied: drawfiddle.com/f/….

10. All types of links

You can open one fiddle with several types of links. The id is the same in all of them.

/f/, /p/ and /c/ always use the current DrawnUI version of the site. /a/ and /x/ keep the version they were built with. See chapter 22.

11. Export to a project

Your browser creates the project from a starter template and downloads it as a .zip file. Nothing is uploaded.

Export .NET (C#)

Type a Project name at the top of the menu. It becomes the name of the .csproj file. The editor remembers it for next time. Then choose the target:

You get the file <name>-<target>.zip. Your code is inside, in the method CreateMainContent(). Your Resources files, the canvas colour and the Gestures setting are inside too. Open the project in Visual Studio or Rider, or run dotnet run. The project uses the DrawnUI NuGet packages, with the same version as the site.

If your code uses the Fiddle API (Fiddle.Query, Fiddle.Load, Fiddle.Emit), you cannot export it: these calls work only in the browser. Remove them first. The status line tells you.

Export Component (TSX)

• ⬇ Download component (.tsx): your component as one file, for a React app you already have. The comment at the top of the file says what your app must set up once (the engine and the fonts).
• ⬇ Download app (.zip): a full Vite + React project. src/App.tsx is your component. src/main.tsx starts the engine. public/fonts/ has the fonts. Run npm install && npm run dev. npm run build creates a static website.

Export Rust

Type a Project name at the top of the menu. It becomes the name of the app and of its crate. Then choose the target:

You get the file <name>-<target>.zip. Your code is inside, in src/app.rs. The canvas color, the fonts of the fiddle and your Resources files (in assets/) are inside too. README.md has the commands to build and run it. The project uses the drawnui crate from crates.io, with the same version as the site. Skia comes with it: the first build downloads it.

12. Open a fiddle from someone else

A /f/ link, or Code on a Community card, opens the fiddle in the editor in view mode. You can read the code but not change it, and it runs immediately. Instead of the toolbar you see:

• Rating: stars and the average, for fiddles in the Community. Click a star to vote. You must be signed in. Click your vote again to remove it.
• by and the name of the author. edited and a date, if the author changed the code after sharing.
• ▶ Run: opens the fiddle full screen in a new tab.
• 🔗 Copy link: copies the link of the fiddle. Nothing new is created.
• ✎ Edit (your own fiddle) or ✎ Edit a copy (a fiddle from someone else). The copy is yours. When you share it, it gets a new link. The original does not change.
• Export .NET, Export Component or Export Rust. You can export without editing.

Change a fiddle you shared

Open it and press ✎ Edit. Change the code. Press 💾 Save changes. The link stays the same. The Community card and the ratings stay too. People see the new code. If the fiddle is in the Community, it goes back to review, because the code changed. ↶ Undo brings back the code from before.

If you press Share as Fiddle instead, the new code gets a new link.

13. The Community

The home page, drawfiddle.com, shows fiddles that people added to the Community.

• Top and New change the order. New is the default. Top uses the ratings and the number of votes: one vote of 5 stars does not beat ten votes of 4 stars.
• All, .NET, React, Rust and NX show only one language.
• The tags show only fiddles with that tag. The address becomes /t/<tag>. You can share it.
• More cards load when you scroll down.

A card shows a picture, the title, the description, the tags, the language, the rating and the author. Click a card to open it:

Add your fiddle to the Community

1. Sign in. Write a description, add tags, and share the fiddle (Export Web → Share as Fiddle).
2. Open Account → My fiddles. Press Submit to Community on the fiddle. It shows In review.
3. A moderator checks it. When it is accepted, it shows Community, and it appears on the home page. If it is not accepted, the label shows the reason. Change the fiddle and press Resubmit.

While it waits, you can press Withdraw. After it is listed, you can press Unlist at any time. The Contribute button on the home page shows the same steps.

14. Tags

A fiddle can have up to 5 tags. A tag has 2 to 20 characters: letters, numbers and dashes, for example chart, dashboard, game-2d. Type them in the Tags field before you share. Put a comma or a space between them. Later the author can change them on the Community card with Edit tags. The home page shows the most used tags above the cards.

15. Your account

You do not need an account to write, run, share, embed or export. An account gives you more. Everything you share is saved in one list. You can add fiddles to the Community and vote. You can use your account on all your devices.

Sign in

Press Login in the top bar. There are two ways to sign in:

• Sign in with Google, where it is available.
• With your email: type your email and press Send code. You get a code with 6 numbers. It works for 10 minutes and only once. Type or paste it. It is checked when you type the sixth number. There is no password. Change email goes back.

You stay signed in for 30 days in that browser. We save only your email address. We never save your name or picture from Google. After too many wrong codes, or too many code requests, you must wait before you try again.

The Account tab

Premium accounts also have a Usage tab. It shows the storage you use, your published apps and your publishes this month, each with its limit.

16. My fiddles and My apps

Two tabs in your account list what you created while signed in:

• My fiddles: code links, from Share as Fiddle, Embed source code as iframe and similar.
• My apps: app links, from Share as App, Run as App and Embed canvas as iframe. With Premium it also has your published apps (chapter 17).

Did someone send you a link? Paste it (or only its id) in the field at the top and press Add. It is then saved in your list.

The buttons above the list are filters: All, Community, In review, and with Premium also Pinned, Published and AOT. Each one shows a number.

What each line shows

• A picture and a title. Click the title to change it. It is saved when you click somewhere else.
• The description, date, size and id.
• Numbers: plays, opens in the editor, code views, link views, shares and preview picture views. They are counted once per night. The line above the list shows the date of the last count.

Buttons on each line

17. Premium: publish an app

When someone opens a fiddle link, even /p/, their browser first downloads the compiler and compiles your code (or loads the saved result). A published app is different. We build your fiddle one time, in advance, into a standalone web app with its own address. The visitor downloads only your code, DrawnUI and the drawing engine. There is no editor, no compiler and no label. It starts faster. Use it for your customers or on a product page.

Premium accounts see ★ Premium in the toolbar and Publish app in their lists. At the moment we give Premium by request: write to [email protected].

Three types of app

During the build

After you choose an option, the status line shows ✓ Building — a few minutes. Track it in Account → My apps. A React app or a server app shows ✓ Live now immediately, with the links ▶ open app and ⧉ embed HTML. You can continue working, or close the tab.

In My apps the app shows building…, and the list updates by itself. When the build is done, it shows published. If the build fails, it shows failed and the reason. Fix the code and press Rebuild.

Some code cannot be built in advance, for example reflection or code that creates code while it runs. In that case you get a clear message right away, and nothing is published.

Your published apps

Account → My apps starts with Published standalone apps. For each app:

• The address at the top of the line is the app: drawfiddle.com/a/<id>/. Copy it from there and give it to people.
• Labels: published, building… or failed, and AOT or server for those types.
• The line below shows the download size, the DrawnUI version of the build, and the date.

Only My apps links to your published app. The /f/ link, the /p/ link and ▶ Run in the editor always compile the code in the browser. The ▶ Run button on a Community card opens the published app, if there is one.

Keep the slash at the end

Use drawfiddle.com/a/<id>/, not drawfiddle.com/a/<id>. Without the last slash, the browser needs one extra step before it starts to download the app. This adds about half a second on a slow connection, on every visit. The HTML from Embed already has the slash. Check the links you type yourself.

Limits

Premium includes 10 published apps, 300 MB of storage and 30 publishes per month. The Usage tab shows how much you use. Apps with the same DrawnUI version share the engine files, so your second app loads faster than the first.

18. Server apps

Publish pre-compiled app (Server-Side) compiles your fiddle on our server in about one second. It also draws the first picture immediately, so the link works for the first visitor. Some code is not allowed in server apps. In that case you get a clear error, and nothing is published.

Then the app runs on our server. The visitor gets a stream of pictures, like a video that reacts to taps. The visitor downloads nothing, so the page opens in less than one second, even on old phones. We send pictures only when something changes (an animation, a tap, an image that loads). So an app that does nothing uses no data. The maximum is 30 pictures per second. Each visitor gets their own copy of the app.

• Taps work. The keyboard and drag gestures do not work yet.
• A visit ends after 30 minutes. The number of visitors at the same time is limited. When all places are busy, a new visitor waits for a free place.
• Your code can only draw. Files, network, reflection, threads and similar APIs are not allowed. To get data, use Fiddle.Load (chapter 19). Web images can be up to 8 MB each.

Address options: ?w=800&h=500 sets the canvas size in pixels. &fps=15 sets the maximum pictures per second (1 to 30). &embed=1 shows only the picture, for embedding. &debug=1 shows the speed and the data used. Other parameters go to your code through Fiddle.Query.

Put a server app on your website: Embed in My apps gives you the HTML. Our server draws the app in the size of the frame, so the same code works on any page:

<div style="max-width:800px; aspect-ratio:800/500">
  <iframe src="https://live.fiddle.drawnui.net/x/<id>?embed=1"
          style="width:100%;height:100%;border:0;border-radius:12px" loading="lazy"></iframe>
</div>

19. Data in, events out

Three simple calls connect a C# fiddle to other websites and data. The same code works in the editor, on the /p/ page, in a published app and in a server app.

Values from the address

var city  = Fiddle.Query.Text("city", "Belgrade");   // ?city=London
var count = Fiddle.Query.Int("count", 5);             // Int / Double / Bool / Text / Csv / List, with default values
var xs    = Fiddle.Query.Csv("values");               // ?values=3,5,8 → [3, 5, 8]

The person who creates the address chooses the values: a link, your web page or your server.

Load data

Your code does not use the network directly. A server app has no network at all. Your code asks the host. The host loads the data and gives the JSON to your code:

Fiddle.Load("https://api.open-meteo.com/v1/forecast?latitude=51.5&longitude=-0.1&current=temperature_2m",
    j => { temp.Text = j.GetProperty("current").GetProperty("temperature_2m").GetDouble() + "°"; temp.Update(); },
    err => { temp.Text = err; temp.Update(); });

Rules: only https, only public addresses, up to 256 KB and 5 seconds per request. We keep each result for 60 seconds, so a thousand visitors of the same chart need only one request. Up to 32 requests at the same time. In the editor and on the /p/ page, the browser loads the data, so the other website must allow it (CORS). The Weather sample shows a full example.

When the visitor taps

new SkiaButton("Buy Pro").OnTapped(me =>
{
    Fiddle.Emit("buy", new { plan = "pro", price = 9 });   // send an event (JSON, up to 4 KB)
    Fiddle.Open("https://example.com/checkout?plan=pro");  // or: send the visitor to another page
});

• When the app is opened by its own address: Fiddle.Open opens the other page. So a "Buy" button needs no JavaScript. Emit writes to the browser console. Add &debug=1 to the address to see each event on the screen while you test.
• When the app is inside your web page: your page receives both as a browser message. Your page decides what to do:

window.addEventListener('message', e => {
  if (!e.data || !e.data.fiddle) return;          // { fiddle: "buy", app: "<id>", data: { plan: "pro", price: 9 } }
  if (e.data.fiddle === 'buy')  openCheckout(e.data.data.plan);
  if (e.data.fiddle === 'open') location.href = e.data.url;   // Fiddle.Open: go there only if you want
});

The Data I/O sample shows this: price cards that take the plan and the currency from the address, and a buy event on each button. In the editor the events appear in the console. Limits: 20 events per second per visitor, 4 KB per event, up to 64 address parameters of up to 2 KB each. Exported .NET projects do not include the Fiddle API (chapter 11).

20. Put a fiddle on your website

Export Web → Embed canvas as iframe opens a test page. It shows your fiddle inside a frame, the HTML code below it, and ⧉ Copy HTML. The HTML looks like this:

<iframe src="https://drawfiddle.com/p/<id>" width="600" height="400"
        style="border:0;border-radius:12px" loading="lazy"></iframe>

You can change the size. The fiddle adapts to the frame. A /p/ frame loads the engine first: a few MB for C#, much less for React, Rust and NX, and the browser keeps it for the next visit. For a lighter frame, use a published app (chapter 17) or a server app, and their Embed button. Embed source code as iframe puts your code on the page instead of the app.

Is the frame on a long page that people scroll on a phone? Set Gestures to Enabled. Otherwise a finger on the frame cannot scroll the page (chapter 21).

Know when the frame has drawn

The load event of the frame comes before anything is drawn. So the app sends a message to your page when the first picture is on the screen. It sends it one time. Show the frame when this message comes, and your page never shows an empty box:

window.addEventListener('message', e => {
  if (e.origin !== 'https://drawfiddle.com' || !e.data || e.data.fiddle !== 'ready') return;
  document.getElementById('my-widget').style.opacity = '1';   // show the frame, hide your placeholder
});

Sometimes the first picture is not complete yet, for example when a photo or data is still loading. Then stop the message and send it yourself later. The message goes out after the next picture:

Fiddle.HoldReady();   // in C# and TSX, while you build the UI
// ... later, when your content has arrived:
Fiddle.Ready();

The /p/ page (C#, React and NX) and published apps send "ready". HoldReady works on the /p/ page and in published React apps. A published C# app sends "ready" after its first picture. The editor never sends it. In exported projects the two calls do nothing.

21. Gestures and page scroll

The Gestures setting in the toolbar decides what happens when a finger drags on the canvas: your fiddle moves, or the page scrolls.

• Lock (the default): every touch, drag and mouse wheel goes to the canvas. The page does not scroll there. Use it for games, drawing, and fiddles that move up and down themselves: lists, drawers, drag and drop.
• Enabled: the canvas and the page share the input. When the page can scroll in the direction of the drag, the page scrolls. Taps, and drags in the other direction, go to the canvas. The mouse wheel scrolls the page, except over a part of the fiddle that uses the wheel.
• Inside a frame on another page, with Enabled: dragging up and down scrolls the page. Dragging left and right, and taps, go to the canvas. This is good for sliders and carousels that move sideways. A fiddle with its own vertical list should use Lock.
• A drag that starts on a control (React): when the finger starts on a button, a slider, a carousel, a text field or a drag handle, the whole drag stays on the canvas until the finger is lifted.

The setting is saved with the fiddle, like the background colour. Fiddles shared before this setting existed use Lock. The setting works in the editor immediately, on the /p/ page after you share, in published apps after Rebuild, and in exported projects.

To change it on a fiddle you already shared: open it, press ✎ Edit, choose the setting, press 💾 Save changes (the link stays the same). If you published an app from it, press Rebuild. When you load a sample, the setting goes back to Lock.

22. Which DrawnUI version runs

We update the site when a new DrawnUI version comes out. A fiddle contains only code. So:

• Fiddle links (/f/, /p/, /c/ and their frames) and the editor always use the current DrawnUI version of the site. After an update, each fiddle is compiled one more time. The About window shows the current version.
• Published apps (/a/) and server apps (/x/) keep the version they were built with. You can see it on each app in My apps. Press Rebuild to use the current version.
• Exported projects use the DrawnUI NuGet packages (or the drawnui-react npm package) of the version the site uses on the day you export.

23. Limits

• Code: up to 100 KB per fiddle. Description: 200 characters. Tags: 5.
• Your Resources files: up to 3 MB per fiddle (25 MB with Premium).
• The number of shares and sign-in codes per hour is limited.
• Rust: 30 server builds a month with a free account. Premium has no limit.
• A link that nobody opens for 60 days is deleted. These are never deleted: fiddles in the Community (or in review), pinned fiddles, and fiddles shared by Premium accounts.
• A free fiddle with your own files is deleted after 3 days without visits. Each visit starts the 3 days again. Premium fiddles keep their files.
• Published apps stay online while your plan is active.
• We make a backup of the Community every night.

24. Keyboard

25. For AI agents and scripts

When the editor is loaded, it has a small JavaScript API on window.fiddle, for automation (for example Playwright or an AI agent):

await fiddle.getState()        // { ready, running, status, errors }
await fiddle.setCode(code)     // replace the code in the editor
await fiddle.run()             // compile and draw: { success, errors, status }
await fiddle.getConsole()      // what the code printed
await fiddle.listPresets()     // [{ slug, name }]
await fiddle.loadPreset(slug)  // load and run a sample

To get the pixels of the canvas, take a screenshot of .fiddle-canvas canvas. You cannot read the WebGL canvas with toDataURL.

Connect an AI assistant (MCP)

The site has an MCP server. With it, an AI assistant can search the Community, read the code of any fiddle and share its own code. You do not need an account or a key. Add it to Claude Code with:

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

Or, in a tool that uses a JSON config:

{ "mcpServers": { "drawnui-fiddle": { "type": "http", "url": "https://drawfiddle.com/mcp" } } }

Tools: search_snippets, get_source, create_fiddle, get_preview. The server card is at /.well-known/mcp/server-card.json.

Text and markdown versions

Pages that have a text version give it to you. Ask for text/markdown, or add .md to the address:

https://drawfiddle.com/index.md        the whole Community
https://drawfiddle.com/show/{id}.md    one fiddle: description, links, code
https://drawfiddle.com/c/{id}.md       only the code
https://drawfiddle.com/openapi.json    the public API for reading
https://drawfiddle.com/llms-full.txt   this guide and the DrawnUI skills in one file

26. Questions and answers

Why is the first download so big? For C#, your browser gets a real C# compiler and the .NET runtime. This happens only once. After that the browser keeps them. The home page also loads them in the background while you look at the Community. React, Rust and NX fiddles are much smaller.

Is my code sent to a server? In C#, React and NX, not while you work: your browser compiles it. Rust code goes to our server when you press ▶ Run, because a browser cannot compile Rust. Your code is uploaded only when you share or publish it, so that the link can show it. Exports and pictures are made in your browser.

I changed my fiddle, but the link shows the old code. A link always shows the code it was created with. New code gets a new link. To keep the same link, use ✎ Edit and 💾 Save changes (chapter 12).

My published app does not show my changes. A published app keeps the code and the DrawnUI version from its build. Press Rebuild in My apps (chapter 22).

My app is slow. What can I do? In the editor, the first run after a change also compiles. That is normal. If the drawing itself is slow: cache parts that do not change (UseCache), do not create controls again on every frame, and use effects (shaders, blur, shadows) only on small areas. For a published app with a lot of calculation, use Publish pre-compiled AOT app (WASM). It is much faster for that kind of code. The normal build is best for normal UI.

Why is my server app not as smooth as a local app? Our server draws it and sends the pictures over the network. The maximum is 30 pictures per second, and it depends on the connection. So it is not good for games or constant animation. It is very good for charts, dashboards and simple widgets: they open in less than one second on any device and use no data when nothing changes. For animation and games, publish a WASM app.

Something looks different from my MAUI app. DrawnUI draws everything itself on every platform. So a difference is a bug. Please report it in the DrawnUI discussions (Fiddle category).

How do I get Premium? At the moment we give it by request. Write to [email protected].

Contact: [email protected].