A lightweight, declarative frontend framework that brings server-driven interactivity to HTML with minimal JavaScript. Slim lets you build dynamic web applications using simple HTML attributes.
- Declarative HTML attributes - Define behavior directly in your markup
- HTTP method support - GET, POST, PUT, DELETE requests via attributes
- Event-driven architecture - Custom events for component communication
- Real-time updates - WebSocket support for live data
- Intersection Observer - Lazy loading with
appearevents - Form handling - Automatic form serialization and submission
- Target selectors - Update specific elements with responses
- Query parameter inheritance - Hierarchical parameter collection
- Zero dependencies - Pure JavaScript, no external libraries
Include Slim in your HTML:
<script src="slim.min.js"></script>Add interactive behavior with attributes:
<button s-get="/api/data" s-target="#result">Load Data</button>
<div id="result"></div>s-get="/path"- Make GET requests-post="/path"- Make POST requests-put="/path"- Make PUT requests-delete="/path"- Make DELETE request
s-on="event"- Listen for specific eventss-on="event | other-event"- Listen for multiple eventss-on="event on .selector"- Global event delegation
s-target="#selector"- Update elements matching selector- Server can override with
S-Targetheader
s-emit="event-name"- Broadcast custom events-confirm="message"- Show confirmation dialogs-query="key=value"- Add query parameterss-ws="/websocket"- WebSocket connection URL
<button s-get="/api/counter" s-target="#count">
Get Count
</button>
<span id="count">0</span><form s-post="/api/users" s-target="#message">
<input name="name" placeholder="Name" required>
<input name="email" placeholder="Email" required>
<button type="submit">Create User</button>
</form>
<div id="message"></div><button s-emit="data-updated">Refresh Data</button>
<div s-on="data-updated" s-get="/api/fresh-data" s-target="#content">
<div id="content">Loading...</div>
</div><div s-on="appear" s-get="/api/lazy-content">
Content loads when scrolled into view
</div><body s-query="version=1">
<div s-query="user=123">
<button s-get="/api/data" s-target="#result">
<!-- Request will include: ?version=1&user=123 -->
</button>
</div>
</body>Every WebSocket message is treated as a global event
<body s-ws="/ws">
<div s-on="user-joined" s-get="/api/users" s-target="#user-list">
<ul id="user-list"></ul>
</div>
</body>Elements have default events when s-on is not specified:
<form>→submit<button>→click<input>,<select>→change- Other elements →
appear
Slim recognizes special response headers:
S-Target: selector- Override client-side target (optional, the default target is the element itself)S-Emit: event-name- Broadcast event after processingS-Refresh: true- Force page reload
text/html- Updates target element'sinnerHTMLtext/plain- Updates target element'stextContent- Other types - Only processes headers
Slim dispatches events on elements:
slim:ok- Request succeededslim:error- Request failedslim:done- Request completed (always)
Use selectors for global event handling:
<!-- Listen for clicks on any .delete-btn -->
<div s-on="click on .delete-btn" s-delete="/api/items" s-target="#list">
<ul id="list">
<li>Item 1 <button class="delete-btn">×</button></li>
<li>Item 2 <button class="delete-btn">×</button></li>
</ul>
</div>Forms automatically serialize all inputs:
<form s-put="/api/profile" s-target="#status">
<input name="name" value="John">
<input name="email" value="[email protected]">
<input type="file" name="avatar">
<button type="submit">Update Profile</button>
</form>For GET requests, form data becomes query parameters. For other methods, data is sent as FormData.
- Progressive Enhancement - Start with working HTML forms, add Slim attributes
- Semantic HTML - Use appropriate elements (
<button>,<form>, etc.) - Error Handling - Listen for
slim:errorevents - Loading States - Use
slim:doneto hide spinners - Confirmation - Use
s-confirmfor destructive actions
Slim works in all modern browsers that support:
- ES6+ JavaScript
- Fetch API
- Custom Events
- Intersection Observer
- WebSockets (optional)
MIT