ULX — Universal Layout Expression
VS Code extension for the ULX: full-stack apps declared in a single file.
Features
Syntax Highlighting
Rich colorization for all ULX constructs:
- Directives —
!app, !db, !table, !auth, !api, !screen, !state, !fetch, !guard, !if/!else, and more
- Nodes —
@Container, @Button, @Card, @Table, @Chart, etc.
- Props —
key:value pairs, flags (row, col, wrap), hex colors, bindings
- Events —
on:navigate, on:submit, on:toggle, on:set, etc.
- Data bindings —
{{variable | pipe}} expressions with operator highlighting
- SQL — Inline SQL with keyword and
$param highlighting
- HTTP methods —
GET, POST, PUT, DELETE in API routes
- Comments —
-- inline comments
IntelliSense (Autocomplete)
Context-aware completions:
- Directives inside the right block (e.g.,
!guard inside API routes)
- All node types (
@Container, @Button, etc.)
- Prop keys with value suggestions (
align:center, bg:primary)
- Event handlers (
on:navigate:, on:submit:)
- Pipe formatters inside
{{ | }} (currency, date, relative)
- State/fetch variable names inside bindings
- Field types and modifiers in table definitions
- Auth properties and providers
Diagnostics (Validation)
Real-time error checking:
- Missing
!app arguments
- Unknown database providers
- Duplicate table names, screen IDs, screen paths
- Duplicate state variables
- Invalid state types
- Malformed
!state, !fetch, !guard syntax
- Incorrect indentation (must be multiples of 2)
- Unclosed
{{ }} bindings
- Max nesting depth (10 levels)
- Unknown field types in tables
Format on save / format document:
- Normalize indentation to configured size (default: 2 spaces)
- Convert tabs to spaces
- Remove trailing whitespace
- Collapse multiple blank lines
- Insert final newline
Snippets (30+)
Fast scaffolding with typed snippets:
| Prefix |
Description |
!app |
App declaration with target |
!db |
Database block with table |
!table |
Table definition |
!auth |
Auth configuration |
!api |
API routes block |
!screen |
Screen with guard and fetch |
screen:login |
Complete login screen |
screen:dashboard |
Dashboard with sidebar and stats |
crud |
Full CRUD scaffold (table + all API routes) |
api:list |
GET list with pagination |
api:create |
POST create endpoint |
api:update |
PUT update endpoint |
api:delete |
DELETE endpoint |
@Card |
Card component |
@Table |
Data table with columns |
@Dialog |
Delete confirmation dialog |
@List |
List with empty state |
@Form |
Form with validation |
@Chart |
Chart component |
@Sidebar |
Sidebar navigation |
stats-row |
Row of stat cards |
!if / !ifelse |
Conditionals |
field:fk |
Foreign key field |
field:enum |
Enum field |
Theme
Includes ULX Dark color theme (Catppuccin Mocha-inspired) optimized for ULX files.
Quick Start
- Install the extension
- Create a
.ulx file
- Start typing
!app to scaffold your app
Extension Settings
| Setting |
Default |
Description |
ulx.format.indentSize |
2 |
Spaces per indent level |
ulx.format.insertFinalNewline |
true |
Add newline at end of file |
ulx.validation.enabled |
true |
Enable diagnostics |
ulx.completion.enabled |
true |
Enable autocomplete |
ulx.trace.server |
off |
Language server tracing |
Language Reference
See the ULX v1.0 Specification for the complete language reference.
License
MIT — Created by Structly Labs
| |
