previs

Interactive AI markupper for frontend developpers.

Install

$ deno install -Af https://deno.land/x/previs@0.0.27/previs.ts

Optional dependencies

• bat (terminal code highlighter) https://github.com/sharkdp/bat
• imgcat (print image in vscode/iterm2) https://iterm2.com/documentation-images.html
• vscode's settings.json: "terminal.integrated.enableImages": true

How to use

At first, check with previs doctor.

$ export PREVIS_OPENAI_API_KEY=...
$ previs doctor
✅ git
✅ code
✅ imgcat
✅ bat
✅ PREVIS_OPENAI_API_KEY is set
✅ vite: ./vite.config.mts
✅ package.json: ./package.json
✅ tsconfig.json: ./tsconfig.json
✅ compilerOptions.jsx: react-jsx
Library: react
Base: ./

# Fix
$ previs button.tsx

# Fix with import (for tailwind and others)
$ previs button.tsx --import style.css

# Fix with image upload (CAUTION: many token used)
$ previs button.tsx --vision

# Preview with size
$ previs button.tsx -w 400px

# Generate new file
$ previs newfile.tsx

Preview Convensions

Put single file for preview in vite project.

• exported __PREVIEW__
• exported default
• Same symbol of filename(caseless)

Examples.

export default function Button() {
  const buttonStyle = {
    backgroundColor: 'red',
    color: 'white',
  };
  return <button type="button" style={buttonStyle}>Click me</button>
}

Same filename (caseless)

// Button.tsx
export function Button() {
  return <button type="button" style={buttonStyle}>Click me</button>
}

__PREVIEW__

// __PREVIEW__: best priority.
export function __PREVIEW__() {
  return <>...</>
}

Run with test

# run after -- command before code accept and retry.
$ previs button.tsx -- pnpm vitest --run __FILE__

__FILE__ is replaced to generated temp file. (eg. button.__previs__.tsx)

TODO

• Commands
  • previs
  • previs gen
  • previs fix
  • previs fix --auto
  • previs doctor
  • previs ss
  • previs test
  • previs gen-test
  • previs init
• Integration
  • react
  • svelte
  • vue
  • qwik
  • preact
  • astro
  • htmx
• Auto Detection
  • UI library auto detection
  • tailwind auto detection
  • file named component detection
  • panda-css
• load tailwind config
• format
• Load previs.config.json
• Load specified vite.config by options
• width/height
• show diff
• Web UI
• VRT
• testing library sample
• Node package
  • @previs/helper

LICENSE

MIT