Attributes
Includes Deno configuration
Repository
Current version released
8 months ago
Dependencies
deno.land/x
std
Versions
- v0.1.10Latest
- v0.1.9
- v0.1.8
- v0.1.8
- v0.1.7
- v0.1.6
- v0.1.6
- v0.1.5
- v0.1.4
- v0.1.2
- v0.1.1
- v0.1.0
- v0.1.0
- v0.0.30
- v0.0.29
- v0.0.28
- v0.0.27
- v0.0.26
- v0.0.25
- v0.0.24
- v0.0.23
- v0.0.23
- v0.0.21
- v0.0.20
- v0.0.19
- v0.0.19
- v0.0.18
- v0.0.17
- v0.0.17
- v0.0.16
- v0.0.15
- v0.0.14
- v0.0.13
- v0.0.12
- v0.0.11
- v0.0.10
- v0.0.9
- v0.0.8
- v0.0.7
- v0.0.6
- v0.0.5
- v0.0.4
- v0.0.4
- v0.0.3
- v0.0.2
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.13/previs.ts
## optional
$ brew install bat rlwrap
imgcat https://iterm2.com/documentation-images.html
in vscode settings
{
// in settings.json
"terminal.integrated.enableImages": true,
}
How to use
preview
Put single file for preview in vite project.
// 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>
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