Surfpack

Run react web apps code directly in the browser with instant browser-bundling

Features

• [x] ES modules powered by esm.sh and sourcemaps
• [x] CSS Loader
• [x] React jsx/tsx compiled using esbuild.wasm
• [x] Client side routing apps compatible (pushState, react router, etc..)
• [ ] Vue, Angular

🌐 Online Demo

🚀 Try it now

Example : fully working react

import { init } from "surfpack";

const surfpack = init({
  container: document.getElementById("app"),
  files: [
    {
      path: "App.jsx",
      content: `
        import React, { useState } from 'react';
        import { createRoot } from 'react-dom/client';

        function Counter() {
          const [count, setCount] = useState(0);
          return (
            <div>
              <h1>Count: {count}</h1>
              <button onClick={() => setCount(count + 1)}>Increment</button>
            </div>
          );
        }

        const root = createRoot(document.getElementById('root'));
        root.render(<Counter />);
      `,
    },
    {
      path: "index.html",
      content: '<div id="root"></div>',
    },
  ],
  entryFile: "App.jsx",
  theme: "dark",
  width: "100%",
  height: 600,
});

Development

npm install
npm run dev        # Start development server

🎮 Development Playground

When running npm run dev, you can access the interactive development playground at:

http://localhost:5101/src/_dev-playground/playground

Build for prod

npm run build:prod # Build for production