Project Structure

Project Structure

Layout of a consumer project created with srl init:

my-report/
├── livingdocs/            # Livingdocs components (see Components)
├── pdf/                   # PDFreactor configuration (+ customers/)
├── public/                # Static files
├── src/                   # Vue app (App.vue, views, router, assets/scss, …)
├── srl/                   # copied by `srl prepare`, gitignored – do not edit
├── .srl/                  # generated imports and plugins – do not edit
├── .output/               # build output
├── srl.config.json        # design tokens (see Design Tokens)
├── livingdocs.config.json # Livingdocs design settings
└── vite.config.ts

Generated files

These are (re)generated by the Vite plugin and srl map – change the sources instead of the generated files:

File	Generated from
srl/**/*.scss (config modules)	srl.config.json (beaver)
srl/index.scss	system modules + src/assets/scss/placeholders/**
.srl/imports/{app,ldd,pdf,word,xbrl}.scss	src/assets/scss/*.scss, fonts, component scss/ files
Livingdocs design JSON, .srl/plugins/asyncLdComponent.ts	livingdocs/**
.srl/plugins/asyncSrlComponents.ts, .srl/types/components.d.ts	src/components/**/*.vue (global app components)

Aliases

The Vite plugin provides aliases such as #srl, #ld, #components, #imports, srl and assets.