previs

Code generation toolkit for frontend components.

What it is?

• Standalone component preview
• Screenshot
• CLI Code fixing with OpenAI

Install

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

## TODO: should be optional
$ brew install bat rlwrap

previs preview

Put file for preview.

// 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>
}

# setup vite project
$ previs button.tsx
[previs] start http://localhost:3434/

previs fix

TBD

TODO

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

LICENSE

MIT