DEV Community: steven chao

How I Built a Free Sudoku Generation API with Rust and WebAssembly

steven chao — Sun, 20 Sep 2026 15:06:58 +0000

How I Built a Free Sudoku Generation API with Rust and WebAssembly

Sudoku looks simple — a 9×9 grid, digits 1 through 9, no repeats in any row, column, or 3×3 box. But generating a good puzzle is a genuinely compute-heavy task. It's not "fill the grid and call it a day": you need backtracking search, uniqueness verification, and careful difficulty calibration. When you're serving puzzles through a public API at scale, generation speed stops being a nicety and starts being your latency and your server bill.

I recently shipped a free Sudoku generation API at Sudoku100, and the core engine is written in Rust compiled to WebAssembly. In this post I'll walk through the algorithm, the WASM setup, and the public API design — everything you need to spin up a similar service or just start consuming the endpoint today.

Why WebAssembly for a puzzle generator?

A Sudoku generator has two properties that make it a great fit for WASM:

It's CPU-bound. Backtracking over 9×9 grids with uniqueness checks is pure number crunching — exactly the kind of tight loop where interpreted JavaScript falls behind compiled code.
It's portable. The same puzzle logic needs to run in the browser (client-side generation for the interactive game) and on the server (the API endpoint). Write it once in Rust, compile once to WASM, and both surfaces share identical behavior.

The result: one source of truth for puzzle correctness, and near-native speed in both environments.

The algorithm: generate, dig, verify

Generating a valid Sudoku boils down to three steps.

1. Generate a complete solution (backtracking)

Start with an empty grid and fill it cell by cell. At each cell, try candidate digits in random order, recursively continue, and backtrack on dead ends:

fn fill(grid: &mut Grid, pos: usize, rng: &mut impl Rng) -> bool {
    if pos == 81 {
        return true; // solved
    }
    let (row, col) = (pos / 9, pos % 9);
    let mut candidates: Vec<u8> = (1..=9).collect();
    candidates.shuffle(rng);
    for n in candidates {
        if is_valid(grid, row, col, n) {
            grid.set(row, col, n);
            if fill(grid, pos + 1, rng) {
                return true;
            }
            grid.set(row, col, 0);
        }
    }
    false
}

Randomizing the candidate order per cell is what guarantees every puzzle comes out different.

2. Dig holes (remove cells)

Once you have a full solution, remove cells according to a difficulty target. The number of remaining clues is the single biggest lever on difficulty:

Difficulty	Clues remaining
Beginner	40–45
Easy	35–39
Medium	30–34
Hard	25–29
Expert	20–24
Extreme	17–19

At 17 clues you're brushing up against the theoretical minimum for a puzzle with a unique solution — which is exactly why "extreme" is genuinely extreme.

3. Verify uniqueness

Removing cells can accidentally create puzzles with multiple valid solutions, which is bad UX and technically not a valid Sudoku. The harder tiers run a uniqueness check: if more than one solution exists, re-dig or discard and retry. This is the step that makes "easy" puzzles still satisfying and "extreme" puzzles actually solvable by logic.

Compiling Rust to WASM

The Rust core is compiled with wasm-pack / wasm-bindgen into a sudoku100.wasm binary plus a JS glue file. The build produces artifacts that work in three environments:

wasm_sudoku_standalone.js        # browser (ESM)
wasm_sudoku_standalone.cjs       # Node.js (CommonJS)
wasm_sudoku_standalone.node.mjs  # Node.js (ESM)

Because the same .wasm binary is reused everywhere, the browser game and the server API are guaranteed to produce identical puzzles — no "works on the server but differs in the client" bugs.

On the JS side, the generator exposes a small, clean surface:

import { generateSudokuData, generateSudokuImage } from './sudoku-image-generator-api.js';

const { puzzle, solution } = generateSudokuData({ difficulty: 'medium' });
const png = generateSudokuImage({ difficulty: 'hard', size: 512, onlyImage: true });

The image generator uses the WASM engine to produce the puzzle data, then renders it to a PNG/WebP/JPG buffer via canvas — so you get a ready-to-embed image in one call, not just a data array.

The public API

The endpoint is dead simple: no API key, no auth, no rate-limit ceremony. You just request an image (or data) with a few optional parameters.

Random puzzle (any difficulty):

https://www.sudoku100.com/sudoku-img

A specific difficulty:

https://www.sudoku100.com/sudoku-img/easy
https://www.sudoku100.com/sudoku-img/hard
https://www.sudoku100.com/sudoku-img/extreme

Custom size and format:

https://www.sudoku100.com/sudoku-img?width=800&format=png
https://www.sudoku100.com/sudoku-img?width=720&format=webp

Supported formats: png, webp, jpg. Supported difficulties: beginner, easy, medium, hard, expert, extreme.

A specific puzzle by ID (for linking to a fixed, shareable puzzle):

https://www.sudoku100.com/img-id/238

Embedding a fully interactive game is just an iframe:

<iframe
  name="sudoku-embed"
  src="https://www.sudoku100.com/embed/interactive"
  width="800" height="600"
  style="border: none; overflow: hidden; border-radius: 6px;">
</iframe>

Under the hood, the server endpoint (/api/sudoku-image) accepts difficulty, size, format, gridSize (4 for a 4×4 grid, 9 for 9×9), and a returnData/base64 flag that returns JSON instead of raw image bytes — useful for LLM agents or apps that need the puzzle array, not a raster image.

Why this matters for performance

Because generation happens in WASM, a single request can produce a full puzzle and render its image without ever leaving compiled code. The practical result: low per-request latency and no heavy server-side image tooling. For a free API that anyone can hit from a blog, an app, or an AI agent, that cost profile is the whole ballgame — free to run means free to offer.

Try it / use it

The whole thing is open source, including the MCP server and LLM skill integration:

Repo: sudoku100com-create/Sudoku-generate-API
Docs & live playground: sudoku100.com/api

If you're building anything that needs on-demand puzzles — a print generator, an app, an AI agent that teaches Sudoku, a daily-challenge site — the API is free and ready. Drop a star on the repo if you find it useful, and feel free to ask questions in the comments.

Lightweight Date Picker Component

steven chao — Mon, 02 Feb 2026 07:33:35 +0000

Lightweight Date Picker Component: From Sudoku100 Project Practice

Project Background

This date picker component was originally developed for my Sudoku100 project — a free, online sudoku game platform for sudoku enthusiasts of all skill levels. If you're interested in sudoku or looking for a fun online puzzle game, feel free to check it out at: https://www.sudoku100.com

During the development of Sudoku100, I discovered the need for a lightweight, easy-to-use, and multi-language date picker to handle features like user birthdays and game record timestamps. After researching existing solutions, I found that they were either too bloated or not flexible enough, so I decided to implement one myself.

Core Technical Points

1. iOS-Style Wheel Picker

This is the core interaction method of the component. By mimicking the iOS system's wheel picker, it provides users with a smooth and intuitive date selection experience.

Technical Implementation:

Use CSS overflow-y: scroll to implement vertical scrolling
Listen to touch operations through touchstart, touchmove, touchend events
Implement inertia scrolling algorithm for more natural scrolling
Use transform: scale() and opacity to provide visual feedback for selected items

setupWheelScroll(wheel, type) {
    const itemHeight = 56;
    let isTouching = false;
    let velocity = 0;
    let lastTimestamp = 0;

    wheel.addEventListener('touchstart', (e) => {
        isTouching = true;
        velocity = 0;
        lastTimestamp = performance.now();
    }, { passive: true });

    wheel.addEventListener('touchmove', (e) => {
        if (!isTouching) return;
        e.preventDefault();
        // Calculate scrolling speed
        const deltaTime = currentTimestamp - lastTimestamp;
        if (deltaTime > 0) {
            velocity = deltaY / deltaTime;
        }
        // Update scroll position
        wheel.scrollTop += deltaY;
    }, { passive: false });

    wheel.addEventListener('touchend', () => {
        isTouching = false;
        // Apply inertia scrolling
        if (Math.abs(velocity) > 0.3) {
            this.applyInertiaScroll(wheel, type, itemHeight, velocity);
        } else {
            this.snapToItem(wheel, type, itemHeight);
        }
    }, { passive: true });
}

2. Inertia Scrolling Algorithm

To make the scrolling experience closer to native applications, physics-based inertia scrolling was implemented:

Record the user's swipe speed
Use friction coefficient (0.95) to simulate physical deceleration
Automatically snap to the nearest option when speed falls below threshold

applyInertiaScroll(wheel, type, itemHeight, initialVelocity) {
    let velocity = initialVelocity;
    const friction = 0.95;
    const minVelocity = 0.1;

    const animate = () => {
        wheel.scrollTop += velocity * 16;
        velocity *= friction;

        if (Math.abs(velocity) > minVelocity) {
            requestAnimationFrame(animate);
        } else {
            this.snapToItem(wheel, type, itemHeight);
        }
    };

    animate();
}

3. Multi-Language Support

The component supports 9 languages and can automatically adjust the date display order based on language:

Year-Month-Day order: Chinese, Japanese, Korean
Day-Month-Year order: English, Spanish, French, German, etc.

Language Adaptation Implementation:

generatePickerColumns(minYear, maxYear) {
    const langCode = window.commonTranslations?.lang || 'en';
    const isYearFirst = (langCode.startsWith('zh') || langCode === 'cn' ||
                        langCode.startsWith('ja') || langCode.startsWith('ko'));

    if (isYearFirst) {
        // Year, Month, Day
        return `
            <div class="picker-column">Year</div>
            <div class="picker-column">Month</div>
            <div class="picker-column">Day</div>
        `;
    } else {
        // Day, Month, Year
        return `
            <div class="picker-column">Day</div>
            <div class="picker-column">Month</div>
            <div class="picker-column">Year</div>
        `;
    }
}

4. Smart Date Validation

Automatically handles changes in the number of days in different months:

getDaysInMonth(year, month) {
    return new Date(year, month + 1, 0).getDate();
}

updateDayOptions() {
    const daysInMonth = this.getDaysInMonth(this.currentYear, this.currentMonth);
    // Dynamically generate day options based on current year and month
}

When users switch months, the component automatically updates the day options (e.g., February only has 28 or 29 days).

5. Responsive Design

Uses CSS media queries to adapt to different screen sizes:

@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
    }

    .picker-columns {
        width: 90%;
    }
}

@media (max-width: 480px) {
    .picker-columns {
        width: 80%;
    }
}

6. Zero-Dependency Pure Native Implementation

The entire component doesn't depend on any third-party libraries, using only:

Native JavaScript (ES6+)
Native CSS3
Native DOM API

This makes the component:

Small in size (~10KB when minified)
Fast loading
Easy to integrate
No version conflict risks

Use Cases

1. Mobile Web Applications

Due to the iOS-style wheel interaction, it's particularly suitable for mobile scenarios:

User registration/login (selecting birthday)
Appointment systems (selecting date)
E-commerce applications (selecting delivery date)
Travel applications (selecting travel date)

2. Multi-Language Internationalization Projects

If your project needs to support multiple languages, this component works out of the box:

No need to implement date pickers separately for each language
Automatically adapts to different language date formats
Supports right-to-left (RTL) languages (like Arabic)

3. Lightweight Projects

For projects that prioritize performance:

Don't want to introduce large date libraries (like Moment.js, date-fns)
Only need basic year-month-day selection functionality
Have strict limitations on bundle size

4. Rapid Prototyping

Quickly implement functionality in the early stages of a project:

Simple API calls
No complex configuration required
Fast integration

Usage Examples

Basic Usage

// Open the date picker
window.datePicker.show(
    'Select Date',  // Title
    function(result) {
        console.log('Year:', result.year);
        console.log('Month:', result.month + 1);
        console.log('Day:', result.day);
    },
    {
        initialYear: new Date().getFullYear(),
        initialMonth: new Date().getMonth(),
        initialDay: new Date().getDate()
    }
);

Setting Initial Date

window.datePicker.show(
    'Pick a Date',
    ({ year, month, day }) => {
        alert(`Selected: ${year}-${month + 1}-${day}`);
    },
    {
        initialYear: 2025,
        initialMonth: 0,  // January
        initialDay: 15
    }
);

Multi-Language Support

// Set language
window.commonTranslations = {
    lang: 'zh',  // Chinese
    datePicker: {
        modalTitle: '选择日期',
        confirmButton: '确认'
    }
};

// Open the picker
window.datePicker.show(
    '选择日期',
    function(result) {
        console.log('Selected:', result.year, result.month + 1, result.day);
    }
);

Custom Styling

/* Modify confirm button color */
.modal-confirm {
    background: #ff6b6b;
}

/* Modify selected item style */
.picker-wheel-item.selected .item-text {
    color: #ff6b6b;
    font-size: 22px;
}

/* Modify item height */
.picker-wheel-item {
    height: 60px;
}

Technical Architecture

File Structure

Year-Month-Day-Date-Picker/
├── date-picker.js       # Main component logic
├── date-formatter.js    # Date formatting utility
├── date-picker.css      # Component styles
├── example.js           # Usage examples
└── index.html           # Demo page

Core Class Design

DatePicker Class

show() - Display the picker
hide() - Hide the picker
confirm() - Confirm selection
selectYear/Month/Day() - Select specific values
updateDayOptions() - Update day options

DateFormatter Class

formatDate() - Format complete date
formatYearMonth() - Format year and month

Event Handling Flow

User Interaction → Touch Events → Calculate Speed → Inertia Scroll → Snap Alignment → Update State → Visual Feedback

Performance Optimization

1. Event Throttling

Use requestAnimationFrame during scrolling to optimize rendering performance:

const animate = () => {
    wheel.scrollTop += velocity * 16;
    if (Math.abs(velocity) > minVelocity) {
        requestAnimationFrame(animate);
    }
};

2. CSS Hardware Acceleration

Use transform and opacity to trigger GPU acceleration:

.picker-wheel-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

3. Lazy DOM Loading

Only create picker DOM when needed to avoid unnecessary memory usage.

Browser Compatibility

Chrome/Edge (latest)
Firefox (latest)
Safari (latest)
Mobile browsers (iOS Safari, Chrome Mobile)

Project Repository

GitHub: https://github.com/lvayywyg-cmyk/Year-Month-Day-Date-Picker

Conclusion

This date picker component started from an actual project requirement and, through careful design and optimization, has become a lightweight, easy-to-use, and feature-complete solution. It demonstrates how to implement complex interactive effects using native technologies, while also proving that sometimes "building your own wheel" is more suitable than using existing solutions.

If you're looking for a lightweight date picker, or want to learn how to implement iOS-style wheel interactions, feel free to try out this project. If you're interested in Sudoku100 puzzle games, you're also welcome to visit https://www.sudoku100.com to experience it!

Related Links: