DEV Community

HARUN PEHLİVAN
HARUN PEHLİVAN

Posted on

SQL Database Code Generator

#codepen

Welcome to the SQL Database Code Generator! This powerful web app simplifies database schema design by letting you visually create tables, columns, indexes, and foreign keys—then instantly generates clean, production-ready SQL for your preferred database system. Whether you're prototyping a new application, learning SQL, or managing database migrations, this tool eliminates manual coding errors while saving you valuable development time. Built entirely with HTML, CSS, and JavaScript, the application supports MySQL, PostgreSQL, SQL Server, Oracle, and SQLite with database-specific syntax. Its intuitive interface features real-time SQL previews, one-click exports, and a responsive design that works flawlessly on both desktop and mobile devices. Best of all, your work automatically saves in the browser, so you can pick up right where you left off—no installations or logins required!

Key Features:

✅ Multi-Database Support – Generate SQL for MySQL, PostgreSQL, SQL Server, Oracle, and SQLite
✅ Interactive Table Designer – Define columns, data types, constraints, and defaults
✅ Index Management – Create single or multi-column indexes (regular or unique)
✅ Foreign Key Relationships – Set up referential integrity with ON DELETE actions
✅ Real-Time SQL Preview – Instantly see generated SQL as you configure your table
✅ Export Options – Copy SQL to clipboard or download as a .sql file
✅ Dark/Light Mode – User-friendly theme switching
✅ Responsive Design – Works on desktop and mobile devices
✅ Local Storage – Saves your work automatically between sessions

Technologies Used:

Frontend: HTML5, CSS3 (Flexbox, Grid), JavaScript (ES6)
UI/UX: Font Awesome icons, modern CSS animations
Browser APIs: Clipboard API (for copying SQL), Web Share API (for sharing)
Enter fullscreen mode Exit fullscreen mode

· Storage: localStorage for saving table configurations
How to Use:

  1. Define Your Table

o Enter a Table Name (e.g., users, products).

o Select your Database Type (MySQL, PostgreSQL, etc.).

  1. Add Columns

o Click "Add Column" to define fields (name, type, length, nullable, default).

Use the up/down buttons to reorder columns.
Enter fullscreen mode Exit fullscreen mode

· Configure Indexes & Foreign Keys

Switch to the Indexes tab to add indexes (unique or multi-column).
Use the Foreign Keys tab to define relationships between tables.
Enter fullscreen mode Exit fullscreen mode

· Generate & Export SQL

Click "Generate SQL" to create the script.

Copy the SQL or Download it as a .sql file.
Enter fullscreen mode Exit fullscreen mode

· Advanced Options

Toggle Dark/Light Mode from the top-right corner.
Your work is automatically saved in the browser.
Enter fullscreen mode Exit fullscreen mode

How to Run?

Download the provided source code zip file.
Extract the downloaded zip file.
Open the html file and you are now ready to go!
Enter fullscreen mode Exit fullscreen mode

Check out this Pen I made!

Top comments (0)