https://github.com/gracile-web/starter-projects
Templates used by with "npm create gracile@latest" or via shallow cloning.
https://github.com/gracile-web/starter-projects
Last synced: 5 months ago
JSON representation
Templates used by with "npm create gracile@latest" or via shallow cloning.
- Host: GitHub
- URL: https://github.com/gracile-web/starter-projects
- Owner: gracile-web
- Created: 2024-04-08T01:35:24.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-07T14:03:55.000Z (9 months ago)
- Last Synced: 2025-04-07T14:39:27.227Z (9 months ago)
- Language: TypeScript
- Homepage: https://gracile.js.org/
- Size: 203 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-lit - Gracile Starters - Gracile full-stack starter projects (SSR/SSG). (Starter Templates)
README
# 🎇 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 **D**eveloper e**X**perience for building, instead of fiddling around.
---
**Starters**:
- [Basics](#basics)
- [Minimal setup (static)](#minimal-setup-static)
- [Minimal setup (Bootstrap/Tailwind)](#minimal-setup-bootstraptailwind)
- [Minimal setup with various kinds of test suites.](#minimal-setup-with-various-kinds-of-test-suites)
- [Minimal setup (HTML/CSS minification)](#minimal-setup-htmlcss-minification)
- [Minimal setup for client routing (SPA)](#minimal-setup-for-client-routing-spa)
- [Minimal server (Express)](#minimal-server-express)
- [Minimal server (Hono)](#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**:
```sh
npm create gracile@latest -t basics
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/basics?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/basics)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/basics my-project
```
📑 **Sources**: [basics](https://github.com/gracile-web/starter-projects/tree/main/templates/basics)
## Minimal setup (static)
A statically generated project.
📥 **CLI**:
```sh
npm create gracile@latest -t minimal-static
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/minimal-static?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/minimal-static)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/minimal-static my-project
```
📑 **Sources**: [minimal-static](https://github.com/gracile-web/starter-projects/tree/main/templates/minimal-static)
## Minimal setup (Bootstrap/Tailwind)
A project with popular vendors CSS preconfigured.
📥 **CLI**:
```sh
npm create gracile@latest -t minimal-bootstrap-tailwind
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/minimal-bootstrap-tailwind?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/minimal-bootstrap-tailwind)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/minimal-bootstrap-tailwind my-project
```
📑 **Sources**: [minimal-bootstrap-tailwind](https://github.com/gracile-web/starter-projects/tree/main/templates/minimal-bootstrap-tailwind)
## Minimal setup with various kinds of test suites.
Browser (Playwright), Unit tests (Node).
**Available commands**
```sh
test:unit
test:unit:dev
test:integration
test:integration:dev
test:component
test:component:dev
test:e2e
test:e2e:dev
test:all
```
---
📥 **CLI**:
```sh
npm create gracile@latest -t minimal-testing
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/minimal-testing?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/minimal-testing)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/minimal-testing my-project
```
📑 **Sources**: [minimal-testing](https://github.com/gracile-web/starter-projects/tree/main/templates/minimal-testing)
## Minimal setup (HTML/CSS minification)
Static/server and dev/build with minified CSS+HTML.
📥 **CLI**:
```sh
npm create gracile@latest -t minimal-minification
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/minimal-minification?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/minimal-minification)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/minimal-minification my-project
```
📑 **Sources**: [minimal-minification](https://github.com/gracile-web/starter-projects/tree/main/templates/minimal-minification)
## Minimal setup for client routing (SPA)
Client-side routing demo, with hydration, for any mode.
📥 **CLI**:
```sh
npm create gracile@latest -t minimal-client-routing
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/minimal-client-routing?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/minimal-client-routing)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/minimal-client-routing my-project
```
📑 **Sources**: [minimal-client-routing](https://github.com/gracile-web/starter-projects/tree/main/templates/minimal-client-routing)
## Minimal server (Express)
A Gracile handler, already set up with Express and static file serving.
📥 **CLI**:
```sh
npm create gracile@latest -t minimal-server-express
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/minimal-server-express?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/minimal-server-express)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/minimal-server-express my-project
```
📑 **Sources**: [minimal-server-express](https://github.com/gracile-web/starter-projects/tree/main/templates/minimal-server-express)
## Minimal server (Hono)
A Gracile handler, already set up with Hono and static file serving.
📥 **CLI**:
```sh
npm create gracile@latest -t minimal-server-hono
```
[](https://codesandbox.io/s/github/gracile-web/starter-projects/tree/main/templates/minimal-server-hono?embed=1)
[](https://stackblitz.com/github/gracile-web/starter-projects/tree/main/templates/minimal-server-hono)
⏬ **Download**:
```sh
npx degit gracile-web/starter-projects/templates/minimal-server-hono my-project
```
📑 **Sources**: [minimal-server-hono](https://github.com/gracile-web/starter-projects/tree/main/templates/minimal-server-hono)
---
- [Documentation website (gracile.js.org)](https://gracile.js.org/)
- [Documentation website repository](https://github.com/gracile-web/website)
---
> “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_