devjar

Zero-dependency React prototyping.

pages

index.tsx

components

intro.tsx

routes.tsx

styles.css

1import Intro from '../components/intro'2import Routes from '../components/routes'3import '../styles.css'45export default function Page() {6  return (7    <div className="page">8      <main>9        <Intro10          name="devjar"11          title="Prototype with React."12          description={13            'CDN dependencies while developing. ' +14            'Prerendered static pages when you build.'15          }16          action="Edit"17        />18        <Routes19          routes={[20            { file: '├── index.tsx', path: '/' },21            { file: '├── about.tsx', path: '/about' },22            {23              file: '└── docs/\n    └── start.tsx',24              path: '/docs/start',25            },26          ]}27        />28      </main>29    </div>30  )31}
import Intro from '../components/intro'
import Routes from '../components/routes'
import '../styles.css'

export default function Page() {
  return (
    <div className="page">
      <main>
        <Intro
          name="devjar"
          title="Prototype with React."
          description={
            'CDN dependencies while developing. ' +
            'Prerendered static pages when you build.'
          }
          action="Edit"
        />
        <Routes
          routes={[
            { file: '├── index.tsx', path: '/' },
            { file: '├── about.tsx', path: '/about' },
            {
              file: '└── docs/\n    └── start.tsx',
              path: '/docs/start',
            },
          ]}
        />
      </main>
    </div>
  )
}

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 →