{"id":13608072,"url":"https://github.com/gracile-web/gracile","last_synced_at":"2026-04-04T22:05:49.918Z","repository":{"id":228322651,"uuid":"773246782","full_name":"gracile-web/gracile","owner":"gracile-web","description":"A thin, full-stack, web framework — Powered by Vite and Lit SSR. Works with Node's HTTP or WHATWG Fetch.","archived":false,"fork":false,"pushed_at":"2026-04-01T22:22:13.000Z","size":4335,"stargazers_count":47,"open_issues_count":4,"forks_count":4,"subscribers_count":4,"default_branch":"main","last_synced_at":"2026-04-02T23:52:04.959Z","etag":null,"topics":["lit","markdown","meta-framework","mpa","spa","ssg","ssr","web-components","web-platform"],"latest_commit_sha":null,"homepage":"https://gracile.js.org","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gracile-web.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yaml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["JulianCataldo"],"custom":["https://www.buymeacoffee.com/JulianCataldo"]}},"created_at":"2024-03-17T06:11:11.000Z","updated_at":"2026-04-01T01:24:52.000Z","dependencies_parsed_at":null,"dependency_job_id":"a673a962-88c4-45fe-b907-fe70d8a4a875","html_url":"https://github.com/gracile-web/gracile","commit_stats":{"total_commits":174,"total_committers":3,"mean_commits":58.0,"dds":0.2183908045977011,"last_synced_commit":"7ff4d62a5ed8385220bc24742c55aae713f9b085"},"previous_names":["gracile-web/gracile"],"tags_count":846,"template":false,"template_full_name":null,"purl":"pkg:github/gracile-web/gracile","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gracile-web%2Fgracile","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gracile-web%2Fgracile/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gracile-web%2Fgracile/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gracile-web%2Fgracile/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gracile-web","download_url":"https://codeload.github.com/gracile-web/gracile/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gracile-web%2Fgracile/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31416478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T20:09:54.854Z","status":"ssl_error","status_checked_at":"2026-04-04T20:09:44.350Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["lit","markdown","meta-framework","mpa","spa","ssg","ssr","web-components","web-platform"],"created_at":"2024-08-01T19:01:24.011Z","updated_at":"2026-04-04T22:05:49.909Z","avatar_url":"https://github.com/gracile-web.png","language":"TypeScript","funding_links":["https://github.com/sponsors/JulianCataldo","https://www.buymeacoffee.com/JulianCataldo"],"categories":["Projects Using Vite.js","web-components"],"sub_categories":["Open Source"],"readme":"# 🧚 Gracile\n\nA thin, full-stack, **web** framework.\n\nFeatures:\n\n- Portable **HTML**, **CSS** and **JS**, thanks to **Lit (SSR)**.\n- Highly responsive during dev. and build, thanks to **Vite**.\n- **Minimal dependency footprint** for its **runtime** and your\n  **distributable**.\n- Embrace web standards like **Custom Elements** (aka Web Components) or the\n  **WhatWG Fetch** API.\n- A streamlined **D**eveloper e**X**perience for building, instead of fiddling\n  around.\n\n# 🏁 Get Started\n\nBootstrap a project with the `create gracile@latest` command:\n\n```\nnpm create gracile@latest\npnpm create gracile@latest\nbun create gracile@latest\nyarn create gracile@latest\n```\n\nFor more information, head over to the\n[documentation website (gracile.js.org)](https://gracile.js.org/).\n\n## 🌐 A platform-minded meta-framework\n\nGracile is powered by **Vite** and **Lit SSR**.\n\nWith it, you can achieve:\n\n- File-based routing with efficient code-splitting\n- **S**erver **S**ide **R**endering\n- **S**tatic **S**ite **G**eneration\n- **Server** integration (`Request`/`Response`) for **Express**, **Hono**…\n- Full-stack **Custom Elements** (Lit), with hydration\n- **Content** websites\n- Multi or Single Page **Applications**\n- Progressive enhancements (no JS fallbacks, smart hydration…)\n- And more, via **Add-ons** (Markdown, Metadata, SVG…)\n\nAll that, with a **few conventions**, a **standard-oriented** approach and a\nvery **contained footprint** 🤏.\n\nWeb Components, TypeScript, SASS, Lit, and other DX perks are all at your\nfingertips; while remaining optional.\n\nThanks to the Vite modular architecture, and Node.js versatility, **developer\nexperience** is smoothed up across the board, while in **development** and when\nbuilding for **production**.\n\n## Ease of use\n\nWrite the same markup, styling and scripting languages for both server and\nclient side.  \nThe ones that you already know and use everywhere else: **HTML**, **CSS** and\n**JavaScript**.\n\nSimplicity doesn't mean obfuscation. You're still in charge without abandoning\nflexibility to your framework.\n\n## Standards oriented\n\nBuilt with a platform-minded philosophy. Every time a standard can be leveraged\nfor a task, it should be.  \nIt also means fewer vendor-specific idioms to churn on and a more portable\ncodebase overall.  \nStop re-implementing the wheel, and embrace **future-proof APIs**, you'll thank\nyourself later!\n\n## Developer Experience\n\nThe DX bar has been constantly raised, alongside developers' expectations about\ntheir everyday tooling.  \nThe \"Vanilla\" community is full of gems, in a scattered way.  \nGracile provides an integrated, **out-of-the-box** experience while keeping\nnon-core opinions as _opt-ins_.\n\n## Convention over configuration\n\nFinding the right balance between **convenience** and **freedom** is tricky.  \nHopefully, more and more patterns will be established in the full-stack JS\nspace.\n\nGracile is inspired by those widespread practices that will make you feel at\nhome.\n\n## Light and unobtrusive\n\nAll in all, the Gracile framework is just Vite, Lit SSR and a very **restricted\nset of helpers and third parties**.  \nCheck its\n[dependency tree on npmgraph](https://npmgraph.js.org/?q=@gracile/gracile),\nyou'll see by yourself.  \nAlso, everything is done to **keep your Vite configuration as pristine as\npossible**. Augmenting an existing project can be done in a pinch, with no\ninterference.\n\n## Performances\n\n**Speed is not the main goal** for Gracile, that's because it is just the sane\ndefault you'll start with.  \nAvoiding complex template transformations, or surgically shipping client-side JS\nare just a few facets of what makes Gracile a \"_do more with less_\" power tool.\n\n## Packages\n\n### Core\n\n|                                                                                                                | Package                                         | Description                                   |\n| -------------------------------------------------------------------------------------------------------------- | ----------------------------------------------- | --------------------------------------------- |\n| [![npm](https://img.shields.io/npm/v/@gracile/gracile?label=)](https://www.npmjs.com/package/@gracile/gracile) | [**@gracile/gracile**](./packages/gracile)      | Full-stack web framework — Vite \u0026 Lit SSR     |\n| [![npm](https://img.shields.io/npm/v/@gracile/engine?label=)](https://www.npmjs.com/package/@gracile/engine)   | [**@gracile/engine**](./packages/engine)        | Vite-powered build and dev server engine      |\n| [![npm](https://img.shields.io/npm/v/@gracile/server?label=)](https://www.npmjs.com/package/@gracile/server)   | [**@gracile/server**](./packages/server)        | Server-side utilities and SSR helpers         |\n| [![npm](https://img.shields.io/npm/v/@gracile/client?label=)](https://www.npmjs.com/package/@gracile/client)   | [**@gracile/client**](./packages/client)        | Client-side utilities and interactive helpers |\n| [![npm](https://img.shields.io/npm/v/@gracile/cli?label=)](https://www.npmjs.com/package/@gracile/cli)         | [**@gracile/cli**](./packages/cli)              | CLI and configuration loader                  |\n| [![npm](https://img.shields.io/npm/v/create-gracile?label=)](https://www.npmjs.com/package/create-gracile)     | [**create-gracile**](./packages/create-gracile) | Project scaffolder (`npm create gracile`)     |\n\n### Add-ons\n\n|                                                                                                                                              | Package                                                                         | Description                                   |\n| -------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------- |\n| [![npm](https://img.shields.io/npm/v/@gracile/markdown?label=)](https://www.npmjs.com/package/@gracile/markdown)                             | [**@gracile/markdown**](./packages/addons/markdown)                             | Markdown file import with metadata extraction |\n| [![npm](https://img.shields.io/npm/v/@gracile/markdown-preset-marked?label=)](https://www.npmjs.com/package/@gracile/markdown-preset-marked) | [**@gracile/markdown-preset-marked**](./packages/addons/markdown-preset-marked) | Markdown preset using Marked                  |\n| [![npm](https://img.shields.io/npm/v/@gracile/metadata?label=)](https://www.npmjs.com/package/@gracile/metadata)                             | [**@gracile/metadata**](./packages/addons/metadata)                             | Page head metadata helper (title, OG…)        |\n| [![npm](https://img.shields.io/npm/v/@gracile/sitemap?label=)](https://www.npmjs.com/package/@gracile/sitemap)                               | [**@gracile/sitemap**](./packages/addons/sitemap)                               | Sitemap and robots.txt generation             |\n| [![npm](https://img.shields.io/npm/v/@gracile/svg?label=)](https://www.npmjs.com/package/@gracile/svg)                                       | [**@gracile/svg**](./packages/addons/svg)                                       | SVG import, optimization and inlining         |\n\n### Labs (`@gracile-labs`)\n\n|                                                                                                                                      | Package                                            | Description                                         |\n| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | --------------------------------------------------- |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/client-router?label=)](https://www.npmjs.com/package/@gracile-labs/client-router) | [**client-router**](./packages/labs/client-router) | Client-side routing for Gracile pages               |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/islands?label=)](https://www.npmjs.com/package/@gracile-labs/islands)             | [**islands**](./packages/labs/islands)             | Islands architecture with multi-framework hydration |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/hmr?label=)](https://www.npmjs.com/package/@gracile-labs/hmr)                     | [**hmr**](./packages/labs/hmr)                     | Web Components HMR Vite plugin                      |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/css-helpers?label=)](https://www.npmjs.com/package/@gracile-labs/css-helpers)     | [**css-helpers**](./packages/labs/css-helpers)     | Adopted stylesheets utilities for web components    |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/better-errors?label=)](https://www.npmjs.com/package/@gracile-labs/better-errors) | [**better-errors**](./packages/labs/better-errors) | Enhanced error display and formatting               |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/functional?label=)](https://www.npmjs.com/package/@gracile-labs/functional)       | [**functional**](./packages/labs/functional)       | Signal-based hooks and context primitives           |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/devtools?label=)](https://www.npmjs.com/package/@gracile-labs/devtools)           | [**devtools**](./packages/labs/devtools)           | In-browser dev panel for routes and state           |\n\n### Labs — JSX \u0026 Templates\n\n|                                                                                                                                                                              | Package                                                                                    | Description                                       |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------------------------------------- |\n| [![npm](https://img.shields.io/npm/v/jsx-forge?label=)](https://www.npmjs.com/package/jsx-forge)                                                                             | [**jsx-forge**](./packages/labs/jsx-forge)                                                 | Native TS compiler: JSX to HTML template literals |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/vite-plugin-jsx-forge?label=)](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                         |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/babel-plugin-jsx-to-literals?label=)](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       |\n| [![npm](https://img.shields.io/npm/v/@gracile-labs/vite-plugin-babel-jsx-to-literals?label=)](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        |\n\n### Labs — Literals (`@literals`)\n\n|                                                                                                                                                                  | Package                                                                                         | Description                                 |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | ------------------------------------------- |\n| [![npm](https://img.shields.io/npm/v/@literals/html-css-minifier?label=)](https://www.npmjs.com/package/@literals/html-css-minifier)                             | [**html-css-minifier**](./packages/labs/literals/html-css-minifier)                             | Minify HTML template literal strings        |\n| [![npm](https://img.shields.io/npm/v/@literals/rollup-plugin-html-css-minifier?label=)](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 |\n| [![npm](https://img.shields.io/npm/v/@literals/parser?label=)](https://www.npmjs.com/package/@literals/parser)                                                   | [**parser**](./packages/labs/literals/parser)                                                   | Parse template literals from code           |\n\n### Labs — Standalone tools\n\n|                                                                                                                                                | Package                                                                                  | Description                                        |\n| ---------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | -------------------------------------------------- |\n| [![npm](https://img.shields.io/npm/v/og-images-generator?label=)](https://www.npmjs.com/package/og-images-generator)                           | [**og-images-generator**](./packages/labs/og-images-generator)                           | OG image generator from HTML (no headless browser) |\n| [![npm](https://img.shields.io/npm/v/vite-plugin-standard-css-modules?label=)](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          |\n\n### Internal\n\n|                                                                                                                                      | Package                                                          | Description                             |\n| ------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------- | --------------------------------------- |\n| [![npm](https://img.shields.io/npm/v/@gracile/internal-tsconfigs?label=)](https://www.npmjs.com/package/@gracile/internal-tsconfigs) | [**@gracile/internal-tsconfigs**](./packages/internal/tsconfigs) | Shared TypeScript configuration presets |\n| [![npm](https://img.shields.io/npm/v/@gracile/internal-utils?label=)](https://www.npmjs.com/package/@gracile/internal-utils)         | [**@gracile/internal-utils**](./packages/internal/utils)         | Shared monorepo utilities               |\n\n## 👐 Contributing\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md).\n\n---\n\n- [Documentation website (gracile.js.org)](https://gracile.js.org/)\n- [Documentation website repository](https://github.com/gracile-web/website)\n- [Starter projects repository](https://github.com/gracile-web/starter-projects)\n\n---\n\n\u003e “Perfection is achieved, not when there is nothing more to add, but when there\n\u003e is nothing left to take away.”\n\u003e\n\u003e ―\n\u003e [Antoine de Saint-Exupéry](https://en.wikipedia.org/wiki/Antoine_de_Saint-Exup%C3%A9ry),\n\u003e _Airman's Odyssey_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgracile-web%2Fgracile","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgracile-web%2Fgracile","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgracile-web%2Fgracile/lists"}