previs

Interactive AI markupper for programmers.

Install

$ deno install -Af https://deno.land/x/previs@0.0.17/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

Setup vite project and run previs fix ...

$ export PREVIS_OPENAI_API_KEY=...
$ previs fix button.tsx

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

Preview Convensions

Put single file for preview in vite project.

• exported __PREVIEW__
• exported deafult

Example.

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

// Prefer __PREVIEW__
export const __PREVIEW__ = () => {
  return <div>
    <Button />
  </div>
}

Run previs with screenshot.

$ previs ss button.tsx
[previs] start http://localhost:3434/
<image output>

TODO

• standalnoe vite builder
• code fixer
• screenshot
• react
• documentation
• load tailwind config
• code format on rewrite
• width/height on preview
• show diff
• svelte
• vue
• qwik
• preact
• tmp file fix
• library auto detection
• tailwind cdn option
• file named component detection

LICENSE

MIT