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 markup for frontend developpers.
Install
Install deno https://docs.deno.com/runtime/manual/getting_started/installation
$ deno install -Af https://deno.land/x/previs@0.1.1/previs.ts
Requirements
To preview in vscode terminal, you need imgcat and vscode settings.
imgcat
# cd under PATH
$ wget https://iterm2.com/utilities/imgcat
$ chmod +x imgcat
vscode
Launch command palette then Preferences: Open User Settings (JSON)
{
// ...
"terminal.integrated.enableImages": true,
}
How to use
Previs works on vite project.
$ npm create vite@latest
# I recommend react-ts template
# cd <proj>
(TODO: previs use vite but ignore project’s vite.config.*)
Set PREVIS_OPENAI_API_KEY
.
$ export PREVIS_OPENAI_API_KEY=...
# or OPENAI_API_KEY
Check with previs doctor
.
$ 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: ./
Run preview and fix interactively.
# Fix
$ previs src/button.tsx
# Fix with import (for tailwind and others)
$ previs src/button.tsx --import style.css
# Fix with image upload (CAUTION: many token used)
$ previs src/button.tsx --vision
# Preview with size
$ previs src/button.tsx -W 400px
# Generate new file
$ previs newfile.tsx
# Fix with test validation
$ previs src/button.tsx -- pnpm vitest --run __FILE__
Previs preview convension (React)
Put single file for preview in vite project.
- exported
__PREVIEW__
export function __PREVIEW__(/* shoud be non-props component */) {}
- Same symbol of filename(caseless)
Button.tsx
=>export function Button() {...}
- exported
default
export default function App() {...}
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
)
How it works
- Create temporal
vite
porject under.previs-*
- Run
vite
server in deno - Run
puppeteer
and take screenshot - Print screenshot by imgcat and
vscode
terminal image integration - Build prompt with current code and fixing request
- Send prompt to openai api to generate new code
- Print screenshot again
previs <options> -- [test-command]
: Run test and retry automaticallyprevis --vision
: Send screenshot to openai- Accepet generated code or add additional request
TODO
- Commands
- previs
- previs gen
- previs fix
- previs fix –auto
- previs doctor
- previs ss
- previs 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 custom vite.config
- Zero config tailwind
- Load
previs.config.json
- width/height
- show diff
- Web UI
- VRT
- testing library sample
- Node package
- @previs/helper
LICENSE
MIT