Complete Guide

Getting Started

This system allows you to create custom NoSQL databases and bind their data to HTML elements using special attributes. Perfect for OBS overlays and dynamic web content.

Installation

Install dependencies: npm install
Start the server: npm start
Access the admin panel at http://localhost:3000

Creating Databases

Navigate to the "Create Database" tab to create a new database:

Enter a database name (e.g., "name", "players", "scores")
Add fields by clicking "+ Add Field" (e.g., "name", "email", "description")
Click "Create Database"

Example: Create a database called "name" with fields: name, email, description

Managing Data

In the "Manage Databases" tab, you'll see all your databases as tabs:

Adding Data

Manual Entry: Use the form at the top of each database to add data row by row
CSV Import: Click "Download CSV Template" to get a template, fill it with your data, then click "Import CSV"

Editing Data

Click the "Edit" button on any row
A popup will appear showing all columns
Click on the column you want to edit
Enter the new value
Click "Save"

Searching

Each database has a search bar at the top:

Type in the search box for live filtering
Use the dropdown to limit search to a specific column
Select "All Columns" to search across all fields

Selection System

Each row has a checkbox. Only one item can be selected at a time per database:

Check a box to select that item (automatically unchecks others)
The selected item's data will populate in your HTML
If nothing is selected, HTML attributes show blank text

Sub-Databases (Relational)

Create filtered views of your main databases:

Click "Create Sub-DB" on a parent database
Enter a name for the sub-database
Select a filter field, operator, and value
The sub-database will show only items matching the criteria

Example: Create a sub-database of "name" that filters where name equals "miguel"

Note: Sub-databases are read-only views. Updates to the parent database automatically reflect in sub-databases.

Using in HTML

To use database data in your web pages:

1. Include the Script

<script src="/localserver.js"></script>

2. Create Database Container

<div data-db="database-name">
    <p data-db-item="field-name">Text</p>
    <p data-db-item="email">Text</p>
</div>

3. How It Works

data-db="database-name" - Container for a specific database
data-db-item="field-name" - Element that displays a specific field
The script automatically polls the server every second
When you select an item in the admin panel, the HTML updates automatically
Updates use smooth transitions (no blinking)

Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>My Overlay</title>
</head>
<body>
    <script src="/localserver.js"></script>
    
    <div data-db="name">
        <h2>Current Selection</h2>
        <p data-db-item="name">Loading...</p>
        <p data-db-item="email">Loading...</p>
        <p data-db-item="description">Loading...</p>
    </div>
</body>
</html>

API Endpoints

For developers who want to integrate with the API:

Method	Endpoint	Description
GET	`/api/databases`	List all databases
GET	`/api/database/:name`	Get database structure and data
POST	`/api/database`	Create a new database
POST	`/api/database/:name/data`	Add data to database
PUT	`/api/database/:name/data/:id`	Update data item
DELETE	`/api/database/:name/data/:id`	Delete data item
POST	`/api/database/:name/select/:id`	Select an item
GET	`/api/database/:name/selected`	Get selected item (used by HTML binding)

Features

Dynamic Schemas: Create databases with any field structure
CSV Support: Import/export data via CSV files
Relational Views: Create filtered sub-databases
Live Updates: HTML automatically updates when selections change
Offline Support: Caches data in browser for offline use
Smooth Transitions: No blinking when switching selections
Search: Live search with column filtering

Troubleshooting

HTML not updating?

Make sure the script is loaded: <script src="/localserver.js"></script>
Check that the database name matches: data-db="your-db-name"
Verify field names match: data-db-item="field-name"
Make sure an item is selected in the admin panel

Server connection lost?

The system automatically uses cached data if the server is unavailable. Data is cached for 5 minutes.

Sub-database not showing data?

Check that the filter criteria matches items in the parent database
Verify the parent database has data

OBS Overlay Database System - Documentation