Attributes
Includes Deno configuration
Repository
Current version released
8 months ago
Dependencies
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
Interactive AI markupper for frontend developpers.
Install
$ deno install -Af https://deno.land/x/previs@0.0.20/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: ./
$ previs button.tsx
# with stylesheet (for tailwind and others)
$ previs button.tsx --style style.css
Preview Convensions
Put single file for preview in vite project.
- exported
__PREVIEW__
- exported
default
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 with test
# run after -- command before code accept and retry.
$ previs button.tsx -- pnpm vitest --run
TODO
- Commands
- previs (serve)
- previs ss (screenshot)
- previs create
- previs fix
- previs doctor
- Integration
- react
- svelte
- vue
- qwik
- preact
- astro
- htmx
- Auto Detection
- UI library auto detection
- tailwind auto detection
- pandacss auto detection
- file named component detection
- load tailwind config
- format
- previs.config.json
- width/height on preview
- show diff
- single binary
- Fix retry
- Web UI
- test checker
- –import option
- VRT
LICENSE
MIT