https://github.com/gracile-web/gracile
A thin, full-stack, web framework — Powered by Vite and Lit SSR. Works with Node's HTTP or WHATWG Fetch.
https://github.com/gracile-web/gracile
lit markdown meta-framework mpa spa ssg ssr web-components web-platform
Last synced: 2 months ago
JSON representation
A thin, full-stack, web framework — Powered by Vite and Lit SSR. Works with Node's HTTP or WHATWG Fetch.
- Host: GitHub
- URL: https://github.com/gracile-web/gracile
- Owner: gracile-web
- License: isc
- Created: 2024-03-17T06:11:11.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2026-04-01T22:22:13.000Z (2 months ago)
- Last Synced: 2026-04-02T23:52:04.959Z (2 months ago)
- Topics: lit, markdown, meta-framework, mpa, spa, ssg, ssr, web-components, web-platform
- Language: TypeScript
- Homepage: https://gracile.js.org
- Size: 4.13 MB
- Stars: 47
- Watchers: 4
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yaml
- License: LICENSE
Awesome Lists containing this project
- awesome-vite - Gracile - A meta-framework powered by Lit SSR. (Projects Using Vite.js / Open Source)
- fucking-awesome-vite - Gracile - A meta-framework powered by Lit SSR. (Projects Using Vite.js / Open Source)
README
# 🧚 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 **D**eveloper e**X**perience for building, instead of fiddling
around.
# 🏁 Get Started
Bootstrap a project with the `create gracile@latest` command:
```
npm create gracile@latest
pnpm create gracile@latest
bun create gracile@latest
yarn create gracile@latest
```
For more information, head over to the
[documentation website (gracile.js.org)](https://gracile.js.org/).
## 🌐 A platform-minded meta-framework
Gracile is powered by **Vite** and **Lit SSR**.
With it, you can achieve:
- File-based routing with efficient code-splitting
- **S**erver **S**ide **R**endering
- **S**tatic **S**ite **G**eneration
- **Server** integration (`Request`/`Response`) for **Express**, **Hono**…
- Full-stack **Custom Elements** (Lit), with hydration
- **Content** websites
- Multi or Single Page **Applications**
- Progressive enhancements (no JS fallbacks, smart hydration…)
- And more, via **Add-ons** (Markdown, Metadata, SVG…)
All that, with a **few conventions**, a **standard-oriented** approach and a
very **contained footprint** 🤏.
Web Components, TypeScript, SASS, Lit, and other DX perks are all at your
fingertips; while remaining optional.
Thanks to the Vite modular architecture, and Node.js versatility, **developer
experience** is smoothed up across the board, while in **development** and when
building for **production**.
## Ease of use
Write the same markup, styling and scripting languages for both server and
client side.
The ones that you already know and use everywhere else: **HTML**, **CSS** and
**JavaScript**.
Simplicity doesn't mean obfuscation. You're still in charge without abandoning
flexibility to your framework.
## Standards oriented
Built with a platform-minded philosophy. Every time a standard can be leveraged
for a task, it should be.
It also means fewer vendor-specific idioms to churn on and a more portable
codebase overall.
Stop re-implementing the wheel, and embrace **future-proof APIs**, you'll thank
yourself later!
## Developer Experience
The DX bar has been constantly raised, alongside developers' expectations about
their everyday tooling.
The "Vanilla" community is full of gems, in a scattered way.
Gracile provides an integrated, **out-of-the-box** experience while keeping
non-core opinions as _opt-ins_.
## Convention over configuration
Finding the right balance between **convenience** and **freedom** is tricky.
Hopefully, more and more patterns will be established in the full-stack JS
space.
Gracile is inspired by those widespread practices that will make you feel at
home.
## Light and unobtrusive
All in all, the Gracile framework is just Vite, Lit SSR and a very **restricted
set of helpers and third parties**.
Check its
[dependency tree on npmgraph](https://npmgraph.js.org/?q=@gracile/gracile),
you'll see by yourself.
Also, everything is done to **keep your Vite configuration as pristine as
possible**. Augmenting an existing project can be done in a pinch, with no
interference.
## Performances
**Speed is not the main goal** for Gracile, that's because it is just the sane
default you'll start with.
Avoiding complex template transformations, or surgically shipping client-side JS
are just a few facets of what makes Gracile a "_do more with less_" power tool.
## Packages
### Core
| | Package | Description |
| -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | --------------------------------------------- |
| [](https://www.npmjs.com/package/@gracile/gracile) | [**@gracile/gracile**](./packages/gracile) | Full-stack web framework — Vite & Lit SSR |
| [](https://www.npmjs.com/package/@gracile/engine) | [**@gracile/engine**](./packages/engine) | Vite-powered build and dev server engine |
| [](https://www.npmjs.com/package/@gracile/server) | [**@gracile/server**](./packages/server) | Server-side utilities and SSR helpers |
| [](https://www.npmjs.com/package/@gracile/client) | [**@gracile/client**](./packages/client) | Client-side utilities and interactive helpers |
| [](https://www.npmjs.com/package/@gracile/cli) | [**@gracile/cli**](./packages/cli) | CLI and configuration loader |
| [](https://www.npmjs.com/package/create-gracile) | [**create-gracile**](./packages/create-gracile) | Project scaffolder (`npm create gracile`) |
### Add-ons
| | Package | Description |
| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------- |
| [](https://www.npmjs.com/package/@gracile/markdown) | [**@gracile/markdown**](./packages/addons/markdown) | Markdown file import with metadata extraction |
| [](https://www.npmjs.com/package/@gracile/markdown-preset-marked) | [**@gracile/markdown-preset-marked**](./packages/addons/markdown-preset-marked) | Markdown preset using Marked |
| [](https://www.npmjs.com/package/@gracile/metadata) | [**@gracile/metadata**](./packages/addons/metadata) | Page head metadata helper (title, OG…) |
| [](https://www.npmjs.com/package/@gracile/sitemap) | [**@gracile/sitemap**](./packages/addons/sitemap) | Sitemap and robots.txt generation |
| [](https://www.npmjs.com/package/@gracile/svg) | [**@gracile/svg**](./packages/addons/svg) | SVG import, optimization and inlining |
### Labs (`@gracile-labs`)
| | Package | Description |
| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | --------------------------------------------------- |
| [](https://www.npmjs.com/package/@gracile-labs/client-router) | [**client-router**](./packages/labs/client-router) | Client-side routing for Gracile pages |
| [](https://www.npmjs.com/package/@gracile-labs/islands) | [**islands**](./packages/labs/islands) | Islands architecture with multi-framework hydration |
| [](https://www.npmjs.com/package/@gracile-labs/hmr) | [**hmr**](./packages/labs/hmr) | Web Components HMR Vite plugin |
| [](https://www.npmjs.com/package/@gracile-labs/css-helpers) | [**css-helpers**](./packages/labs/css-helpers) | Adopted stylesheets utilities for web components |
| [](https://www.npmjs.com/package/@gracile-labs/better-errors) | [**better-errors**](./packages/labs/better-errors) | Enhanced error display and formatting |
| [](https://www.npmjs.com/package/@gracile-labs/functional) | [**functional**](./packages/labs/functional) | Signal-based hooks and context primitives |
| [](https://www.npmjs.com/package/@gracile-labs/devtools) | [**devtools**](./packages/labs/devtools) | In-browser dev panel for routes and state |
### Labs — JSX & Templates
| | Package | Description |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------- |
| [](https://www.npmjs.com/package/jsx-forge) | [**jsx-forge**](./packages/labs/jsx-forge) | Native TS compiler: JSX to HTML template literals |
| [](https://www.npmjs.com/package/@gracile-labs/vite-plugin-jsx-forge) | [**vite-plugin-jsx-forge**](./packages/labs/vite-plugin-jsx-forge) | Vite plugin for JSX Forge |
| [](https://www.npmjs.com/package/@gracile-labs/babel-plugin-jsx-to-literals) | [**babel-plugin-jsx-to-literals**](./packages/labs/babel-plugin-jsx-to-literals) | Babel plugin: JSX to HTML template literals |
| [](https://www.npmjs.com/package/@gracile-labs/vite-plugin-babel-jsx-to-literals) | [**vite-plugin-babel-jsx-to-literals**](./packages/labs/vite-plugin-babel-jsx-to-literals) | Vite wrapper for JSX→Literals Babel plugin |
### Labs — Literals (`@literals`)
| | Package | Description |
| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------- |
| [](https://www.npmjs.com/package/@literals/html-css-minifier) | [**html-css-minifier**](./packages/labs/literals/html-css-minifier) | Minify HTML template literal strings |
| [](https://www.npmjs.com/package/@literals/rollup-plugin-html-css-minifier) | [**rollup-plugin-html-css-minifier**](./packages/labs/literals/rollup-plugin-html-css-minifier) | Rollup plugin for HTML literal minification |
| [](https://www.npmjs.com/package/@literals/parser) | [**parser**](./packages/labs/literals/parser) | Parse template literals from code |
### Labs — Standalone tools
| | Package | Description |
| ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------- |
| [](https://www.npmjs.com/package/og-images-generator) | [**og-images-generator**](./packages/labs/og-images-generator) | OG image generator from HTML (no headless browser) |
| [](https://www.npmjs.com/package/vite-plugin-standard-css-modules) | [**vite-plugin-standard-css-modules**](./packages/labs/vite-plugin-standard-css-modules) | CSS modules via import attributes in Vite |
### Internal
| | Package | Description |
| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------- | --------------------------------------- |
| [](https://www.npmjs.com/package/@gracile/internal-tsconfigs) | [**@gracile/internal-tsconfigs**](./packages/internal/tsconfigs) | Shared TypeScript configuration presets |
| [](https://www.npmjs.com/package/@gracile/internal-utils) | [**@gracile/internal-utils**](./packages/internal/utils) | Shared monorepo utilities |
## 👐 Contributing
See [CONTRIBUTING.md](./CONTRIBUTING.md).
---
- [Documentation website (gracile.js.org)](https://gracile.js.org/)
- [Documentation website repository](https://github.com/gracile-web/website)
- [Starter projects repository](https://github.com/gracile-web/starter-projects)
---
> “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](https://en.wikipedia.org/wiki/Antoine_de_Saint-Exup%C3%A9ry),
> _Airman's Odyssey_