SenangWebs Index (SWI) JS Library Examples

What is SWI?

SenangWebs Index (SWI) is a lightweight JavaScript library that makes it incredibly easy to display JSON data in a user-friendly format with built-in search and pagination. "Senang" means "easy" in Malay, and that's exactly what this library is all about!

Choose between declarative HTML attributes for zero-JavaScript setup, or use the programmatic API for maximum flexibility and control.

Complete Demo Both Methods

See both initialization methods side-by-side with interactive API controls. Perfect for understanding the differences and testing all features.

Side-by-side comparison
Interactive API controls
Real-time examples
Best for learning

View Complete Demo

Declarative HTML Zero JS

Initialize SWI directly in your HTML using data-* attributes. Perfect for quick prototypes and simple use cases where you want to get up and running fast.

No JavaScript required
HTML-only configuration
Perfect for beginners
Quick setup

View Declarative Example

Programmatic JS Full Control

Use the JavaScript API for complete control over your data display. Ideal for complex applications, dynamic content, and when you need programmatic access.

Full JavaScript API
Custom templates
Dynamic data loading
Advanced features

View Programmatic Example

Key Features

Built-in search functionality
Automatic pagination for large datasets
Customizable styling with CSS
Zero external dependencies
Works in all modern browsers
Lightweight and fast
Mobile-friendly and responsive

Quick Start

Declarative (HTML):

Just add the attributes to your HTML and include the script:

<div data-swi-id="myData" data-swi-source="./data.json">...</div>

Programmatic (JavaScript):

Initialize with JavaScript for full control:

new SenangWebsIndex({ container: '#app', data: './data.json', ... })