Form

Form is a notes app with an unusual second half: alongside the notes overview and editor sits a feature builder where you write a small React/TypeScript component and have it become a live part of the running app, no rebuild or redeploy required. You type a component with a default export, and it starts rendering inside Form immediately.

That works because the sandbox compiles and executes arbitrary user code entirely in the browser. Babel's standalone build transpiles the TSX down to plain JavaScript on the fly, and the compiled string is then handed to new Function along with a hand-built module/exports shim so the code can behave like a real ES module even though it never went through a bundler.

// Wrap code to capture exports
const wrappedCode = `
  (function(React, module, exports) {
    ${feature.compiledCode}
    return module.exports.default || module.exports || exports.default || exports;
  })
`;

// Execute the code
const factory = new Function('React', 'module', 'exports', wrappedCode);
const component = factory(React, module, moduleExports);

if (!component || typeof component !== 'function') {
  console.error(`Feature ${feature.id} did not export a valid component`);
  return null;
}

The returned component gets wrapped in its own try/catch at render time, so a broken feature fails as a small red error box in place rather than crashing the rest of the notes app around it. Every user-written feature is one bad render away from a bug, but never one bad render away from taking down the editor.