Latest Stories
Thoughtful writing, updates, and stories from the community.
Live Web - Database
User Guide: How to Use the Database in Your Live Web Editor This is NOT a traditional, complicated SQL database (no MySQL, PostgreSQL, or phpMyAdmin to configure). It is a simple, fast, project-specific database called WebDB+ that works directly in your code and automatically syncs with the server's filesystem. It gives you database-like functionality — without setup, servers, or configuration. Perfect for projects such as blogs, user lists, product galleries, public contact forms, 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 + management buttons 2. Creating Your First Table 1. Click the + Table button (top left). 2. Type a name (e.g., users, products, posts). 3. Click Create. 4. 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, avatar_url). 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. → The 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 easily generate tables by pasting normal CREATE TABLE statements: 1. Click the SQL button (or the big "Click to import SQL" area). 2. Paste your SQL (or select from the example dropdown). 3. Click Import. Supported examples (ready to use): Users table Products table Blog posts + comments Note: The system automatically adds an updated_at column if it's missing! 7. Using the Database in Your Web Page (The Magic Part) Your preview and live site automatically include the WebDB+ library behind the scenes. Just add JavaScript anywhere in your HTML or script.js file. 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): let users = await WebDB.select('users'); users = users.map(u => { if (u.id === 1) u.name = "New Name"; return u; }); // Save the updated list back to the server await WebDB._setRaw('users', { columns: ['id','name','email','updated_at'], rows: users }); 8. NEW: Handling File Uploads from Your Live Site If you want visitors on your generated website to upload files (like profile pictures, resumes, or gallery images), you can use the built-in WebDB.uploadFile() method. How it works: The user selects a file using an HTML <input type="file">. You pass that input to WebDB.uploadFile(inputElement). It securely uploads the file to your project's user_assets/ folder and returns the file path. You save that file path into your database using WebDB.insert(). 9. Tips & Important Notes Auto-saving: Data is saved securely to the server's disk every time you add/edit/delete. Instant Updates: Works in the live preview immediately. File Security: Uploaded files are automatically renamed to prevent overwrites, and strict file-type checking keeps your site safe. No Complex Queries: You cannot run complex SQL queries like SELECT * WHERE age > 18. Instead, just do it in JavaScript: users.filter(u => u.age > 18). Survives Refreshes: Tables and data are permanent and survive even if you close the browser or clear your cache.10. OPTIONAL: Realtime UpdatesSimple Realtime Example:let lastCount = 0; async function startRealtime() { checkUpdates(); setInterval(checkUpdates, 5000); } async function checkUpdates() { const data = await WebDB.select('posts'); const count = data ? data.length : 0; if (count !== lastCount) { lastCount = count; renderPosts(data); } } startRealtime();Better Version:let lastUpdated = 0; async function checkUpdates() { const data = await WebDB.select('posts'); if (!data || data.length === 0) return; const latest = Math.max(...data.map(d => new Date(d.updated_at).getTime())); if (latest !== lastUpdated) { lastUpdated = latest; renderPosts(data); } }Quick Start Template:<div id="feed">Loading...</div> <script> let last = 0; async function render() { const posts = await WebDB.select('posts'); document.getElementById('feed').innerHTML = posts.map(p => `<p>${p.text}</p>`).join(''); } async function sync() { const posts = await WebDB.select('posts'); if (!posts) return; if (posts.length !== last) { last = posts.length; render(); } } setInterval(sync, 5000); render(); </script> Quick Start Template 1: User List Copy and paste this into your HTML file to instantly display a list of users: <h2>Our Users</h2> <div id="user-list">Loading...</div> <script> async function showUsers() { const users = await WebDB.select('users'); if (!users || users.length === 0) { document.getElementById('user-list').innerHTML = "<p>No users found.</p>"; return; } document.getElementById('user-list').innerHTML = users.map(u => `<p><b>${u.username}</b> - ${u.email}</p>`).join(''); } showUsers(); </script> Quick Start Template 2: Image Upload Form & Gallery Copy and paste this to let users upload photos and display them instantly! (Make sure you created a table named gallery with a column named image_path first!) <h2>Public Photo Gallery</h2> <!-- The Upload Form --> <input type="file" id="photoInput" accept="image/*"> <button onclick="uploadPhoto()" id="uploadBtn">Upload Photo</button> <p id="statusMsg"></p> <!-- The Gallery Display --> <div id="gallery-grid" style="display: flex; gap: 10px; margin-top: 20px;"></div> <script> async function uploadPhoto() { const fileInput = document.getElementById('photoInput'); const statusMsg = document.getElementById('statusMsg'); const btn = document.getElementById('uploadBtn'); if (fileInput.files.length === 0) { alert("Please select a file first!"); return; } btn.innerText = "Uploading..."; btn.disabled = true; // 1. Upload the file to the server const savedPath = await WebDB.uploadFile(fileInput); if (savedPath) { // 2. Save the path to the 'gallery' table await WebDB.insert('gallery', { image_path: savedPath }); statusMsg.innerText = "Upload successful!"; fileInput.value = ''; // Clear the input loadGallery(); // Refresh the images } else { statusMsg.innerText = "Upload failed. (Is your project set to Public?)"; } btn.innerText = "Upload Photo"; btn.disabled = false; } async function loadGallery() { const photos = await WebDB.select('gallery'); const grid = document.getElementById('gallery-grid'); if (!photos || photos.length === 0) { grid.innerHTML = "<p>No photos yet.</p>"; return; } // 3. Display the images using the saved paths! grid.innerHTML = photos.map(photo => `<img src="${photo.image_path}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 8px;">` ).join(''); } // Load gallery when page opens loadGallery(); </script> You now have a real working database and file upload system inside your website — no backend setup needed!
Database in the Live Web
User Guide: How to Use the Database in Your Live Web EditorThis 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 Database1. 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 + buttons2. 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 Columns1. 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 + commentsThe 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 tableconst users = await WebDB.select('users');console.log(users);// Add a new rowawait 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!
Whisser New Design Language: A Smarter, Cleaner, More Human Experience
Whisser Introduces a New Design Language Built for the Way People Work TodayAt Whisser, design has never been static.It evolves with people. It grows with behavior. And it improves when real users tell us what they need next.Today, we are introducing Whisser’s new design language—a complete visual and product revamp shaped by modern design trends and informed by surveys answered by thousands of users across the Whisser community.This is more than a redesign.It is a clearer, more focused, and more human way to experience Whisser.Like every meaningful product improvement, this new chapter began with a simple question: how can Whisser feel more useful, more natural, and more personal from the very first screen?The answer led us to rethink everything from layout and hierarchy to navigation, discoverability, visual depth, and everyday usability.The result is a Whisser that feels modern, calm, and easier to use.Designed Around Real Behavior, Not AssumptionsThe best design decisions do not come from guesswork. They come from listening.Whisser’s new design language is built on direct feedback from thousands of users who shared how they browse tools, discover features, manage settings, and move through the platform every day. That feedback helped us identify what mattered most:-faster discovery-simpler navigation-clearer content hierarchy-cleaner visual presentation-a more premium and intuitive experienceThis redesign reflects those priorities in every detail.Instead of adding complexity, we removed friction.Instead of making the interface louder, we made it clearer.Instead of redesigning for trend alone, we redesigned for lasting usability.A More Premium First ImpressionThe new Whisser experience opens with bold confidence.A darker, more immersive visual foundation creates stronger focus and better contrast. Large typography makes the message instantly clear. Generous spacing gives every element room to breathe. Soft gradients and layered surfaces add depth without distraction.The new homepage is built to feel welcoming from the first glance. It introduces Whisser in a way that is more expressive, more polished, and more in tune with how modern digital products are expected to feel today.This kind of visual simplicity mirrors a broader shift in product storytelling across the industry: the strongest interfaces often communicate more by showing less. Whisser’s new design language follows the same principle in its own way: make the experience feel immediate, understandable, and refined.A Homepage That Helps You Find What Matters FasterOne of the most visible improvements in the new Whisser revamp is discovery.The updated homepage is no longer just a list of options. It is a guided, organized experience built to help users find saved items, tools, ideas, and categories with less effort.A prominent search bar now sits at the center of the interface, giving users a faster path to what they need. Around it, category filters create a smoother way to explore Whisser by interest or use case, from AI and communication to education, development, documents, and entertainment.This structure matters.When users have many tools and destinations available, good design should reduce decision fatigue. The new Whisser layout does exactly that by making the platform easier to scan, easier to understand, and easier to trust.A Card System That Feels Cleaner and More AliveThe new design language introduces a more refined card-based system across the platform.Each card feels more distinct, more readable, and more modern. Rounded corners, subtle glow, soft gradients, and improved spacing help each feature stand out without overwhelming the screen. The experience feels lighter, even while offering more information.This shift is important because cards are not just containers. They are decision points.When people browse products, they make quick judgments based on visual clarity. A strong card system improves comprehension at a glance. Users can understand what a feature does, why it matters, and whether they want to open it—without friction.The new Whisser cards are designed to support that fast understanding.They feel approachable. They feel organized. And they give the interface a visual rhythm that is easier on the eyes.Simpler Navigation, Better FlowModern design is not only about appearance. It is about movement.Whisser’s redesigned navigation creates a more natural flow between discovery, profile management, account settings, and feature exploration. From the homepage to personal settings, every transition is designed to feel more connected and less confusing.The updated account area reflects this thinking clearly. Information is easier to scan. Settings are grouped more naturally. Important actions like subscriptions, login activity, profile updates, and password management are presented in a cleaner and more structured way.This makes the platform feel more mature.It also makes users more confident, because they can find what they need without second-guessing where to click next.Built for Modern UI ExpectationsDigital products are evolving quickly. Users now expect interfaces that are not only functional, but emotionally intelligent—products that feel smooth, calm, and thoughtfully designed.Whisser’s new design language responds to those expectations with a modern visual system that embraces several proven interface principles:Clarity over clutterLarge headings, clean labels, and stronger spacing improve readability across the platform.Depth without noiseGradients, shadows, and subtle transparency create dimension while keeping focus on content.Consistency across surfacesFrom feature cards to settings panels, the visual language feels unified.Discoverability by designSearch, categories, and better content grouping make exploration faster and easier.Human-centered presentationThe interface feels less mechanical and more conversational, helping users feel at ease as they browse and interact.These choices align with what users increasingly value in modern software experiences: speed, simplicity, and trust.Why This Redesign MattersA redesign should not happen just to look new.It should solve something.For Whisser, this revamp solves for a product reality that many platforms face as they grow: more tools, more users, more use cases, and higher expectations.As platforms expand, design must work harder. It must help users discover more without feeling lost. It must support flexibility without becoming messy. And it must feel current without losing its identity.That is what makes this redesign meaningful.Whisser’s new design language is not about decoration. It is about creating a better system for how people move, read, choose, and return.It gives Whisser a stronger foundation for the future.Reinvention Is Part of the Whisser DNAWhisser has always believed that good products are never finished.They are refined continuously.They respond to change.They learn from users.This new design language reflects that mindset. It shows Whisser’s willingness to reinvent, not because change is fashionable, but because improvement is essential.Every new layout decision, every polished interaction, and every simplified flow is part of a larger belief: technology should feel easier, not heavier. More human, not more confusing.That belief is now visible across the new Whisser experience.What Users Can Expect NextThis new visual system is more than a one-time refresh. It is a foundation.It gives Whisser a clearer design direction for future features, new tools, deeper personalization, and a more consistent experience across the platform.Users can expect an interface that continues to become:-more intuitive-more connected-more flexible-more refined over timeBecause when the design language is strong, every future improvement becomes easier to deliver and easier to understand.A New Day for WhisserThe new Whisser design language represents a fresh beginning.It is cleaner. Smarter. More modern. More user-led.And most importantly, it is built around the people who use Whisser every day.Inspired by current design standards, shaped by product evolution, and informed by thousands of survey responses from the Whisser community, this redesign is a reflection of where Whisser is now—and where it is going next.This is not just a new look.It is a better experience.It is Whisser, redesigned for today.