# desy-html
> desy-html contains the code you need to start building a user interface for Gobierno de Aragón government webapps.
Latest version **17.0.2** (published 2026-07-24) · EUPL-1.2 license · 0 weekly downloads
## Install
```sh
npm install desy-html
pnpm add desy-html
yarn add desy-html
bun add desy-html
```
## Health
**Score 60/100 (C)** — status: active.
Positive: esm support; no vulnerabilities; recently updated; high maintenance score.
Warnings: low downloads; no types.
## Facts
| | |
|---|---|
| Version | 17.0.2 |
| Published | 2026-07-24 |
| First published | 2021-11-02 |
| Weekly downloads | 0 |
| License | EUPL-1.2 |
| TypeScript types | none |
| Module format | ESM |
| Node | >=20.19.2 <23.0.0 |
| Dependencies | 10 |
| Unpacked size | 4.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Desy |
| Maintainers | jmcuadra, aurquia |
| Keywords | desy, gobierno de aragón, frontend, design system, template |
## Links
- npm: https://www.npmjs.com/package/desy-html
- Repository: https://bitbucket.org/sdaragon/desy-html
- Homepage: https://desy.aragon.es/
- Issues: https://bitbucket.org/sdaragon/desy-html/issues
- npm.io page: https://npm.io/package/desy-html
## Dependencies (10)
- [cally](https://npm.io/package/cally.md) ^0.8.0
- [hex-rgb](https://npm.io/package/hex-rgb.md) ^5.0.0
- [js-yaml](https://npm.io/package/js-yaml.md) ^4.1.0
- [chokidar](https://npm.io/package/chokidar.md) ^3.6.0
- [tailwindcss](https://npm.io/package/tailwindcss.md) ^4.2
- [autoprefixer](https://npm.io/package/autoprefixer.md) ^10.4.21
- [@floating-ui/dom](https://npm.io/package/@floating-ui/dom.md) ^1.6.13
- [@tailwindcss/vite](https://npm.io/package/@tailwindcss/vite.md) ^4.2
- [@tailwindcss/forms](https://npm.io/package/@tailwindcss/forms.md) ^0.5.10
- [@tailwindcss/typography](https://npm.io/package/@tailwindcss/typography.md) ^0.5.18
## Recent versions
- 17.0.2 (latest) — 2026-07-24
- 15.0.0-beta.2 (beta) — 2025-12-15
- 6.2.2 (fix-tailwind) — 2023-06-01
- 17.0.1 — 2026-07-06
- 17.0.0 — 2026-06-24
- 16.0.4 — 2026-03-03
- 16.0.3 — 2026-02-27
- 16.0.2 — 2026-02-19
- 16.0.1 — 2026-02-19
- 16.0.0 — 2026-02-19
- 15.0.3 — 2026-01-08
- 15.0.2 — 2026-01-02
- 15.0.1 — 2025-12-26
- 15.0.0 — 2025-12-26
- 15.0.0-beta.1 — 2025-12-05
- … 89 more at https://npm.io/package/desy-html/versions
## README
# desy-html
[](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12)
An NPM library for building user interfaces for Government of Aragón web applications. It uses Vite, Tailwind CSS and Nunjucks to render HTML+CSS+JS components. It's useful to create lightweight webapps or HTML mockups.
## Overview
**desy-html** is the core design system library that provides:
- **Vite** - Fast build tool and development server with hot module replacement
- **Tailwind CSS v4** - Utility-first CSS framework
- **Nunjucks** - Powerful templating engine for generating HTML
- **Sharp** - Image optimization for production builds
- **Accessible Components** - Pre-built UI components following ARIA patterns
If you need a more powerful library based on this, use its Angular port instead: [desy-angular](https://bitbucket.org/sdaragon/desy-angular)
## Quick Links
- **Documentation:** [https://desy.aragon.es/](https://desy.aragon.es/)
- **Repository:** [https://bitbucket.org/sdaragon/desy-html/](https://bitbucket.org/sdaragon/desy-html/)
- **Starter Project:** [https://bitbucket.org/sdaragon/desy-html-starter/](https://bitbucket.org/sdaragon/desy-html-starter/)
## How do I start a project that uses desy-html components?
To start a new project that uses desy-html as dependency, **don't use this repo**, use the **desy-html-starter** repo instead:
1. Download the desy-html-starter project from [https://bitbucket.org/sdaragon/desy-html-starter](https://bitbucket.org/sdaragon/desy-html-starter)
2. Personalize the downloaded project for your needs
3. You'll be able to use any desy-html component in that project
## Prerequisites
Before you begin, ensure you have the following installed:
- **Node.js** >=20.19.2 <23.0.0
- **npm** >=10.0.0
## Getting Started
### 1. Clone the Repository
```sh
git clone https://bitbucket.org/sdaragon/desy-html.git
cd desy-html
```
### 2. Install Dependencies
```sh
npm install
```
### 3. Start Development Server
```sh
npm run dev
```
This starts the Vite development server with hot module replacement. Open your browser at the URL displayed in the terminal output.
### 4. Build for Production
```sh
npm run build
```
This compiles HTML, purges and minifies CSS, and optimizes JavaScript into the `/dist` folder.
### 5. Preview Production Build
```sh
npm run preview
```
## Project Structure
```
desy-html/
├── public/
│ └── images/ # Library images
├── src/
│ ├── css/ # Stylesheets
│ ├── js/ # JavaScript files
│ │ ├── aria/ # ARIA component implementations
│ │ ├── desy-html.js # Main component exports
│ │ ├── headroom.min.js # Headroom.js library
│ │ └── index.js # Entry point
│ ├── templates/
│ │ ├── components/ # UI component macros
│ │ ├── includes/ # Reusable template partials
│ │ └── pages/ # Page templates
│ ├── main.js # Main entry point
│ └── EUPL-1.2.txt # License file
├── docs/ # Documentation files
├── branding/ # Branding assets and configuration
├── vite.config.js # Vite configuration
├── package.json
└── README.md
```
## Branding Customization
desy-html can be customized for different government organizations.
To customize:
1. Edit `branding/branding.config.js` with your organization's information
2. Replace logos in `/branding/logos/`
3. Run `npm run build`
See [branding/BRANDING.md](branding/BRANDING.md) for complete documentation.
## Styling
### Using Tailwind CSS
The project uses Tailwind CSS v4. All Tailwind utility classes are available in your templates:
```html
Hello World
```
### Theme Variables
desy-html provides CSS custom properties (variables) for consistent theming. These are included in the main [stylesheet](https://bitbucket.org/sdaragon/desy-html/src/master/src/css/styles.css).
## Images
### Image Structure
Images are stored in `public/images/` and can be referenced in templates using the `/images/` path:
```html
```
### Image Optimization
During production builds, images are automatically optimized using Sharp:
- Supported formats: jpg, png, webp, avif
- File sizes are optimized for production
## Development Tips
### Hot Module Replacement
The development server supports HMR. Changes to CSS, JavaScript, and templates will automatically refresh in the browser.
### Debugging
- Check the browser console for JavaScript errors
- Use the Vite terminal output for build errors
- Inspect generated HTML in browser developer tools
## Scripts Reference
| Command | Description |
|---------|-------------|
| `npm run dev` | Start development server with HMR |
| `npm run build` | Build for production |
| `npm run preview` | Preview production build locally |
## Accessibility
All desy-html components are built with accessibility in mind:
- Proper ARIA attributes and roles
- Keyboard navigation support
- Screen reader compatibility
- Focus management
## Browser Support
The project targets modern browsers. For specific compatibility information, refer to the [desy documentation](https://desy.aragon.es/).
## Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Submit a pull request
## Contact the Team
desy-html is maintained by a team at SDA Servicios Digitales de Aragón (Spain). If you want to know more about desy-html, please email any of the commiters.
## Author
**SDA Servicios Digitales de Aragón**
## License
This project is licensed under the [EUPL-1.2](https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12) license.
---
For more information and detailed component documentation, visit [https://desy.aragon.es/](https://desy.aragon.es/)
---
_Source: https://npm.io/package/desy-html · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._