Skip to content
    WebFiddle

    About WebFiddle

    WebFiddle is an online code playground at webfiddle.xyz. It has 9 sandboxes, one of them a React playground, covering 10 languages: HTML, CSS, JavaScript, TypeScript, PHP, Python, Node.js, SQL, Ruby and Lua. You open a sandbox, write code and run it straight away, without creating an account or installing anything.

    The code you write runs inside your browser tab. Each sandbox loads a language engine into the page, and that engine executes your program on your own device.

    Who builds WebFiddle

    WebFiddle is built by Atish Barua, who also writes the articles on the WebFiddle blog.

    You can find Atish Barua on LinkedIn.

    How WebFiddle runs your code

    There is no code-execution server behind the editors. Every sandbox uses an engine that works inside the browser:

    • HTML, CSS & JavaScript— sandboxed iframe with live preview
    • PHP— php-wasm 0.1.0 (WebAssembly)
    • Python— Pyodide 0.26.1 (WebAssembly)
    • Node.js— Web Worker with a Node.js API shim (not a real Node.js process)
    • SQL— sql.js 1.14 (SQLite compiled to WebAssembly)
    • Ruby— ruby.wasm 2.8.1 (WebAssembly)
    • Lua— Fengari (Lua 5.3 VM in JavaScript)
    • TypeScript— TypeScript compiler running in the browser
    • React— React UMD builds with in-browser Babel

    The Python and Node.js sandboxes run your code in a Web Worker, a background thread, so a long-running script does not freeze the editor. The PHP, Python, SQL and Ruby engines are interpreters compiled to WebAssembly, and they have to be downloaded before the first run.

    The code editor is Monaco, the same editor component that powers Visual Studio Code.

    Privacy

    Because execution happens on your device, the code you type is not sent to a WebFiddle server to be run. Some sandboxes do contact third-party services to fetch what your code needs:

    • The PHP and Python engines load from the jsDelivr CDN, and the SQL engine loads its WebAssembly file from sql.js.org.
    • The React playground loads React, ReactDOM and Babel from unpkg, loads npm packages you add from esm.sh, and looks up package versions on the npm registry.

    Session history is kept in your browser's local storage. It stays on the device you used and is removed if you clear the site's data.

    Share links work differently: the code is compressed into the link itself. Anyone who has a share link can read the code in it, so treat the link the way you would treat the code.

    What WebFiddle is not

    • Not a real Node.js runtime. The Node.js sandbox runs JavaScript in a Web Worker with a shim for Node.js APIs such as process and Buffer. Code that depends on the file system, network servers or native modules will not behave as it does in Node.js.
    • Not a database server. The SQL playground runs SQLite through sql.js, so syntax that only MySQL or PostgreSQL supports can fail.
    • Not a build tool. The React playground uses React UMD builds with in-browser Babel rather than a bundler, which suits components and prototypes more than production apps.
    • Not a hosting service. There are no accounts and nothing is deployed. Your work lives in your browser and in the share links you create.

    Read the blog

    The WebFiddle blog has 22 articles on JavaScript, React, TypeScript, CSS, HTML, PHP, Python, Node.js and WebAssembly. Most code examples in them open directly in a sandbox.