Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 3 days 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 (9 months ago)
- Default Branch: main
- Last Pushed: 2024-08-28T11:53:14.000Z (4 months ago)
- Last Synced: 2024-10-15T11:01:41.554Z (2 months ago)
- Topics: lit, markdown, meta-framework, mpa, spa, ssg, ssr, web-components, web-platform
- Language: TypeScript
- Homepage: https://gracile.js.org
- Size: 1.36 MB
- Stars: 25
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
- fucking-awesome-vite - Gracile - A meta-framework powered by Lit SSR. (Projects Using Vite.js / Open Source)
- 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.
## 👐 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_