User Guide: How to Use the Database in Your Live Web Editor
This is NOT a traditional SQL database (no MySQL, PostgreSQL, or phpMyAdmin).
It is a simple, fast, project-specific database called WebDB+ that works entirely in your browser and automatically syncs with the server.
It gives you database-like functionality — without setup, servers, or configuration. Perfect for any projects such as blogs, user lists, products, comments, and more.
1. How to Open the Database
1. Open any project in the editor.
2. At the top (tabs row) click the 🗄️ Database tab.
3. You will see:
- Left sidebar = list of your tables
- Right area = table data + buttons
2. Creating Your First Table
- Click the + Table button (top left).
- Type a name (e.g. `users`, `products`, `posts`).
- Click Create.
- The table instantly appears in the sidebar with two default columns: `id` and `updated_at`.
3. Adding Columns
1. Click any table in the sidebar to view it.
2. Click the + Column button.
3. Type the column name (e.g. `name`, `email`, `price`).
4. Click Add.
→ The column appears immediately in the table.
4. Adding Rows (Data)
1. With a table open, click + Row.
2. A form appears with one field for every column.
3. Fill the fields (you can leave `updated_at` empty — it fills automatically).
4. Click Save.
→ Row is added and the table refreshes.
5. Editing / Deleting
- Delete a row: Click the trash icon on the right of any row.
- Delete a column: Click the small trash icon in the column header.
- Delete entire table: Click the big red trash icon next to the table name (warning: irreversible!).
6. Importing from SQL (Super Useful!)
You can paste normal `CREATE TABLE` statements:
1. Click the SQL button (or the big “Click to import SQL” area).
2. Paste your SQL (you can use the example dropdown).
3. Click Import.
Supported examples (ready to use):
- Users table
- Products table
- Blog posts + comments
The system automatically adds `updated_at` if missing and creates the table + columns.
7. Using the Database in Your Web Page (The Magic Part)
Your preview and live site automatically include the WebDB+ library.
Just add this JavaScript anywhere in your HTML (or in `script.js`):
<script>
// Get all rows from a table
const users = await WebDB.select('users');
console.log(users);
// Add a new row
await WebDB.insert('users', {
username: "john_duck",
email: "[email protected]",
// updated_at is added automatically
});
</script>
Full list of easy commands:
Get all data
= `const data = await WebDB.select('tableName');`
Add new row
= `await WebDB.insert('tableName', { name: "John", age: 25 });`
Update data (example)
= Get → modify → `_setRaw` (see below)
Delete table completely
= `await WebDB._setRaw('tableName', null);`
Example: Update a user
<script>
let users = await WebDB.select('users');
users = users.map(u => {
if (u.id === 1) u.name = "New Name";
return u;
});
await WebDB._setRaw('users', { columns: ['id','name','email','updated_at'], rows: users });
</script>
8. Tips & Important Notes
- Data is saved automatically every time you add/edit/delete.
- Works in the live preview immediately.
- Data is private per project (only you can see it).
- Maximum size is large but not unlimited (normal browser limits).
- You cannot run complex SQL queries like `SELECT * WHERE age > 18`.
→ Just do it in JavaScript: `users.filter(u => u.age > 18)`
- `updated_at` column updates automatically on every insert.
- Tables and data survive even if you close the browser.
Quick Start Template (Copy-Paste)
<h2>Our Users</h2>
<div id="user-list"></div>
<script>
async function showUsers() {
const users = await WebDB.select('users');
document.getElementById('user-list').innerHTML =
users.map(u => `<p>${u.username} - ${u.email}</p>`).join('');
}
showUsers();
</script>
You now have a real working database inside your website — no backend setup needed!