What is Jinno?
Jinno is a two-part developer platform for React: a high-fidelity preview sandbox and an intelligent AI coding agent that understands both code and runtime.
🧱 Part 1: The Sandbox
At the core of Jinno is the sandbox: a virtual environment that renders your component in isolation using your real project setup — including your node_modules, config files, alias paths, and styles.
- Runs via a custom Vite dev server
- Requires zero configuration
- Never modifies your code
- Fully supports Next.js (including server components), Tailwind, Webpack, SVGR, monorepos, and more
- Understands project structure, aliases, and custom setups
The sandbox powers Jinno’s core developer tools:
- ⚡ Live Preview — See your component update as you type
- 🧠 Auto-generated props — Props derived from types, usage, or Storybook
- 📘 Storybook Integration — Renders and controls story variants
- 🔍 Find in Code — Click any UI element to jump to the source file
🧠 Part 2: The AI Agent
Jinno’s AI agent goes far beyond static code understanding. It uses the sandbox to bridge the gap between:
- ✅ Source code
- ✅ Runtime behavior
- ✅ Visual rendering
- ✅ Compilation errors
- ✅ Console logs
When you visually select an element and request a change, Jinno passes the AI agent everything it needs:
- a screenshot of the UI
- the component's source code
- its compiled output
- all linting/build diagnostics
- and runtime logs or browser errors
This multi-dimensional context gives the AI real understanding of:
- how your component looks
- how it works
- and how it might be broken
🧩 Features at a Glance
| Feature | Description |
|---|---|
| ⚡ Live Preview | Real-time rendering of any React component in a virtual sandbox. |
| 🧠 Auto-generated props | Automatically extracts and applies props from types, usage, or Storybook files. |
| 📘 Storybook Integration | Syncs with story.args and supports multiple story variants. |
| 🪄 Visual AI Editing | Select elements in the preview and instruct Jinno’s AI agent to modify the component. |
| 🔍 Find in Code | Click on any element in the preview to instantly jump to the corresponding source code. |
| 🧵 Server Component Support | Works with Next.js server components (RSC) out of the box. |
💡 Why Jinno?
| Advantage | Description |
|---|---|
| 🧼 Zero Config & Non-Intrusive | No setup. Jinno never modifies your source code — all previews are sandboxed. |
| 🚀 Vite-Powered Speed | Instant preview boot-up with custom Vite integration and optimized HMR. |
| 🧠 Intelligent Context Awareness | Auto-detects your dependencies, props, and file structure. |
| 🗂️ Deep Project Integration | Jinno understands your file system, node_modules, and even your project’s alias config. |
| 🧰 Framework & Library Support | Supports Next.js, Create React App, Vite, Webpack, Tailwind, SVGR, monorepos, and more. |
🔍 How It Works
-
Detects Context Automatically
Jinno analyzes your file structure, dependencies, and TypeScript types to understand how your component should be rendered. -
Bootstraps a Preview Sandbox
A temporary React app is generated using a custom Vite dev server. Your component is rendered here in complete isolation, with access to your realnode_modules, environment variables, and shared config files. -
Resolves Files & Aliases
Jinno knows how to locate and load your actual source files — even when you're using aliases, customtsconfig.jsonpaths, or monorepo setups. It builds a consistent environment for accurate previewing. -
Renders and Watches
The component is rendered in real time with hot module replacement. Props are auto-generated based on type definitions, usage patterns, or Storybookargs. -
AI Tasks (Optional)
When an AI edit is triggered, Jinno captures a screenshot and sends it — along with the component’s source code, compilation output, and browser logs — to an internal agent that performs the requested change.
Ready to get started? Installation Guide →