Simpler demo #603

Sbrjt · 2025-03-11T13:44:45Z

The sample demo in the readme seems intimidating...

Here's a simpler one:

<head>
    <title>Demo</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.12.0/sql-wasm.js"></script>
    <!-- preload sql-wasm.wasm, if you like -->
</head>

<body>
    <button id='btn'>Run query</button>

    <script type='module'>
        // Initialize SQL.js
        const SQL = await initSqlJs({
            locateFile: () => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.12.0/sql-wasm.wasm`
        })

        // Create a db with sample data
        const db = new SQL.Database()

        db.run(`CREATE TABLE test (id INTEGER, name TEXT); INSERT INTO test VALUES (1, 'Alice'), (2, 'Bob')`)

        // Run a query
        async function run() {
            const result = await db.exec("SELECT * FROM test")
            console.log(result[0].values)
        }

        btn.addEventListener('click', run)
    </script>
</body>

For previous versions:

<head>
    <title>Demo</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/0.5.0/js/sql-optimized.js"></script>
</head>

<body>
    <button id='btn'>Run query</button>

    <script type='module'>
        const db = new SQL.Database()
        db.run(`CREATE TABLE test (id INTEGER, name TEXT); INSERT INTO test VALUES (1, 'Alice'), (2, 'Bob')`)

        async function run() {
            const result = await db.exec("SELECT * FROM test")
            console.log(result[0].values)
        }

        btn.addEventListener('click', run)
    </script>
</body>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Simpler demo #603

Simpler demo #603

Sbrjt commented Mar 11, 2025 •

edited

Loading

Simpler demo #603

Simpler demo #603

Comments

Sbrjt commented Mar 11, 2025 • edited Loading

Sbrjt commented Mar 11, 2025 •

edited

Loading