devjar

Live Playground & Static Site Export

Designed for agents. Zero Config

Build a website with Devjar. Follow https://devjar.vercel.app/llms.txt
VPGU playgroundWatch the code change live
vgpu.ts
1// Warm — change a number to reshape the light.2export const appearance = {3  speed: 0.35,  // 0 freezes time.4  scale: 2.4,   // Zoom into the pattern.5  warp: 1.2,    // Twist the flowing bands.6  hue: 0.15,    // Try 0.6 for a new palette.7  bands: 3,     // More bands, finer ribbons.8}

Gallery

See the code change as you scroll. Make it your own in the editor.

Drum machine

patterns/pocket.ts
1// 1 = hit, 0 = rest. Each group is one beat.2// Rows: kick, snare, hi-hat, clap.3export default [4    [1,0,0,0, 0,0,1,0, 1,0,0,0, 0,0,0,0],5    [0,0,0,0, 1,0,0,0, 0,0,0,0, 1,0,0,0],6    [1,0,1,0, 1,0,1,0, 1,0,1,0, 1,0,1,1],7    [0,0,0,0, 0,0,0,0, 0,0,0,0, 1,0,0,0],8]

CMS example

content.json
1{2  "name": "devjar",3  "tagline": "Make an idea real. Change it live.",4  "category": "Features",5  "title": "Your next idea, already live.",6  "description": "Write React pages, edit their content, and see your changes in the preview. Start with an idea and keep going.",7  "about": "Devjar is a zero-config React static site builder. Create pages with React and TypeScript, share components between routes, and build a static site from the same files.",8  "entries": [9    {10      "title": "See changes as you make them",11      "category": "Live updates",12      "step": "01"13    },14    {15      "title": "One file. Another page.",16      "category": "File-based routing",17      "step": "02"18    },19    {20      "title": "Build a site you can take anywhere",21      "category": "Static output",22      "step": "03"23    }24  ]25}26

Cards in a jar · React Three Fiber

Make it your own

Click the jar to toss the cards.

Setting things in motion…