Skip to main content

Usage Guide

Jinno gives you powerful tools to interact with your component preview — from controlling props and story variants, to jumping into the source code, and even editing the component using AI.

📘 Control Props with .stories.tsx​

If your component accepts complex props (like elements, callbacks, or nested objects) that Jinno was not able to create them for you, or want to have multiple preview scenarios for your component, you can configure it using a .stories.tsx file next to your component — just like Storybook.

  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.

✨ Auto-generate a Story File​

If your component doesn’t already have a story file, you’ll see a “Create Story” button inside the preview.

Click it, and Jinno will:

  • Create a [ComponentName].story.tsx next to your file
  • Use the auto-generated props it inferred to populate the args
  • Set selectedScenario to the first variant

✅ The file is regular TypeScript and fully editable.

🔍 Find in Code​

Want to know where a specific JSX element is defined?

  1. Click the magnifying glass icon in the bottom toolbar of the preview panel
  2. Then click on any element inside the preview
  3. Jinno will open the exact file and line where the element was defined

🪄 Visual AI Edit​

Jinno’s AI can edit your component by understanding how it looks, how it behaves, and how it’s written.

Here’s how to use it:

  1. Click the Brain icon in the preview bottom toolbar

  2. Click on the element you want to change

  3. Type a command like:

    • “Make this button blue”
    • “Change this text to 'Confirm Order'”
    • “Move this section below the form”

Jinno perform the edit intelligently, it uses:

  • A screenshot of the selected element
  • The source code
  • The compiled output and runtime context
  • Browser logs and errors
Requires Registration

To use AI editing, you'll need to sign in to Jinno.
Free users get 6 AI edit tasks to start with.

That’s it! You’re now ready to get the most out of Jinno.