devjar

Make an idea real. Change it live.

Try it live

pages

index.tsx

about.tsx

story.tsx

components

layout.tsx

content.ts

styles.css

1export default {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

Gallery

Tweak the code, see what happens in the previews.

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]

Shader playground

vgpu.ts

1// Change a number. Reshape the light.2export const look = {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}

SWR playground

swr.ts

1import useSWR from 'swr'2import useSWRMutation from 'swr/mutation'3import useSWRSubscription from 'swr/subscription'45export function useTasks() {6  return useSWR('/tasks')7}89export function useTaskUpdate(saveTask) {10  const mutation = useSWRMutation('/tasks', saveTask)11  return {12    ...mutation,13    update: task => mutation.trigger(task, {14      optimisticData: tasks => tasks.map(15        item => item.id === task.id ? task : item16      ),17      rollbackOnError: true, // Try false, then reject a save.18      populateCache: true,19      revalidate: false,20    }),21  }22}2324export function useActivity(connect) {25  return useSWRSubscription('/activity', (_, { next }) => {26    return connect(event => {27      next(null, previous =>28        [event, ...(previous || [])].slice(0, 3)29      )30    }) // connect returns the unsubscribe function.31  })32}33

Build a site without the setup

Devjar keeps the project structure simple and handles the production details for you.

Routes from files

Files inside pages/ become routes, including nested pages and a custom 404.

pages/
├── index.tsx       → /
├── about.tsx       → /about
└── docs/
    └── start.tsx   → /docs/start

Self-contained production builds

Routes are prerendered to HTML. Dependencies are vendored, and imported assets and Tailwind CSS are emitted with content hashes.

Three commands

Develop locally, create the static output, then preview exactly what you will deploy.

npx devjar dev
npx devjar build
npx devjar start

Ready for any static host

Deploy the generated files at the domain root or use --base for a subdirectory.

Read the CLI documentation →