Jinno: Live preview for React components

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

NOTE: Next.js support in early 2025.

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 properties like for example another component, you can create a "story" file next to your component file where you'll provide example input properties. This file is just like any other file in your project, you have no limits and can import or write any logic that you want in order to create the properties. Similar to storybook concept.

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:

// UsersList.story.tsx

import { User } from './types';
import { UserIcon } from './UserIcon';

export default {
  examples: {
    default: {
      users: [
        {
          id: '1',
          username: 'snow123',
          name: 'John Snow',
          age: 25,
          avatar: UserIcon,
        } as User,
        {
          id: '2',
          username: 'dan79',
          name: 'Dan Mayer',
          age: 23,
          avatar: UserIcon,
        } as User,
        {
          id: '3',
          username: 'george',
          name: 'George Smith',
          age: 30,
          avatar: UserIcon,
        } as User,
      ],
    },
  },
};

Main features

✓ Preview your React component in 1 click

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

Support

✓ React

✓ NextJS - support will be added on early 2025

✓ Vite

✓ Webpack

✓ create-react-app

✓ Javascript

✓ Typescript

✓ Mobx

✓ Redux

✓ Zustand

✓ Tailwind

✓ Bootstrap

✓ CSS

✓ SASS - SCSS

✓ HTML

✓ StoryBook

✓ JS

✓ TS