🎇 Starter projects

Gracile.
A thin, full-stack, web framework.

Features:

• Portable HTML, CSS and JS, thanks to Lit (SSR).
• Highly responsive during dev. and build, thanks to Vite.
• Minimal dependency footprint for its runtime and your distributable.
• Embrace web standards like Custom Elements (aka Web Components) or the WhatWG Fetch API.
• A streamlined Developer eXperience for building, instead of fiddling around.

---

Starters:

• Basics
• Minimal setup (static)
• Minimal setup (Bootstrap/Tailwind)
• Minimal setup with various kinds of test suites.
• Minimal setup (HTML/CSS minification)
• Minimal setup for client routing (SPA)
• Minimal server (Express)
• Minimal server (Hono)

Basics

Get up and running with this all around demo of Gracile features.

• ✅ Minimal styling (make it your own!)
• ✅ SEO-friendly with canonical URLs and OpenGraph data
• ✅ Sitemap support
• ✅ Markdown support
• ✅ SVG support
• ✅ Server-rendered Lit Elements

---

📥 CLI:

npm create gracile@latest -t basics

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/basics my-project

📑 Sources: basics

Minimal setup (static)

A statically generated project.

📥 CLI:

npm create gracile@latest -t minimal-static

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/minimal-static my-project

📑 Sources: minimal-static

Minimal setup (Bootstrap/Tailwind)

A project with popular vendors CSS preconfigured.

📥 CLI:

npm create gracile@latest -t minimal-bootstrap-tailwind

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/minimal-bootstrap-tailwind my-project

📑 Sources: minimal-bootstrap-tailwind

Minimal setup with various kinds of test suites.

Browser (Playwright), Unit tests (Node).

Available commands

test:unit
test:unit:dev

test:integration
test:integration:dev

test:component
test:component:dev

test:e2e
test:e2e:dev

test:all

---

📥 CLI:

npm create gracile@latest -t minimal-testing

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/minimal-testing my-project

📑 Sources: minimal-testing

Minimal setup (HTML/CSS minification)

Static/server and dev/build with minified CSS+HTML.

📥 CLI:

npm create gracile@latest -t minimal-minification

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/minimal-minification my-project

📑 Sources: minimal-minification

Minimal setup for client routing (SPA)

Client-side routing demo, with hydration, for any mode.

📥 CLI:

npm create gracile@latest -t minimal-client-routing

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/minimal-client-routing my-project

📑 Sources: minimal-client-routing

Minimal server (Express)

A Gracile handler, already set up with Express and static file serving.

📥 CLI:

npm create gracile@latest -t minimal-server-express

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/minimal-server-express my-project

📑 Sources: minimal-server-express

Minimal server (Hono)

A Gracile handler, already set up with Hono and static file serving.

📥 CLI:

npm create gracile@latest -t minimal-server-hono

    

⏬ Download:

npx degit gracile-web/starter-projects/templates/minimal-server-hono my-project

📑 Sources: minimal-server-hono

---

• Documentation website (gracile.js.org)
• Documentation website repository

---

“Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away.”

― Antoine de Saint-Exupéry, Airman's Odyssey