Jinno

Jinno: Live preview for React components

Jinno let's you preview React components seamlessly and instantly in your IDE with support for Next.js, Webpack, Vite, react-scripts and others.

How does it work

We do magic! We use AI, a lot of boiler plating and static code analysis to create a dynamic live server previewing your React components. The server basically creates a mini React app just for your component, shipped with all your project dependencies including providers, styles, dynamic assets (fonts or a minified js for example), third party libraries, state management and more. Jinno will also auto generate properties that it was able to detect itself as an input for your component.

Quick start

1. Open a react component file (js/jsx or ts/tsx files)

2. Click CMD + ⌥ + L (Mac) or CTRL + ALT + L (Windows) or right click -> Jinno: Toggle Preview

3. That's it!

For components with complex properties

If your component accepts complex props (like React elements, functions, or nested objects), you can define usage scenarios by creating a .stories.tsx file next to your component.

This follows the same structure used in Storybook, but runs entirely inside your IDE with Jinno.

💡 Jinno supports importing anything and writing custom logic — it's just a regular TypeScript file.

1. Create a [YOUR_COMPONENT_NAME].story.tsx file next to your React component file. For example, if your file is UsersList.tsx, create a file called UsersList.story.tsx next to it (in the same directory)

2. Export an object with the following structure in your .story file:

import { Avatar } from '@chakra-ui/react';
import UsersList from './UsersList'; // your component

const meta = {
  title: 'Components/UsersList',
  component: UsersList,
  parameters: {
    layout: 'centered',
  },
};

export default meta;

export const Primary = {
  args: {
    users: [
      {
        id: '1',
        username: 'snow123',
        name: 'John Snow',
        avatar: <Avatar name="John Snow" src="/avatars/john.png" />,
      },
      {
        id: '2',
        username: 'arya88',
        name: 'Arya Stark',
        avatar: <Avatar name="Arya Stark" src="/avatars/arya.png" />,
      },
      {
        id: '3',
        username: 'daenerys',
        name: 'Daenerys Targaryen',
        avatar: <Avatar name="Dany" src="/avatars/dany.png" />,
      },
    ],
  },
};

export const EmptyList = {
  args: {
    users: [],
  },
};

// 👇 This tells Jinno which story to render by default
export const selectedScenario = Primary;

✅ Jinno supports selectedScenario = Primary, just like Storybook would. ⚡️ Jinno automatically hot-reloads when you change the props, scenarios, or JSX inside your .stories.tsx.

Main features

✓ Preview your React component in 1 click

✓ Hot reload that works 10x faster then your project's live reload.

Support

✓ React

✓ NextJS

✓ Vite

✓ Webpack

✓ create-react-app

✓ Javascript

✓ Typescript

✓ Mobx

✓ Redux

✓ Zustand

✓ MUI

✓ Shadcn

✓ Tailwind

✓ Bootstrap

✓ CSS

✓ SASS - SCSS

✓ HTML

✓ StoryBook

✓ JS

✓ TS

Reporting Issues and Feature Requests

Found a bug or have an idea for a new feature? Let us know by creating an issue in our Issue Tracker.