Building a browser-only tool to turn QR codes into Lego…
    Neura MarketNeura Market/Stable Diffusion
    ChatGPTChatGPTClaudeClaudeGeminiGeminiCursorCursorGrokGrokPerplexityPerplexityStable DiffusionStable Diffusion
    DeepSeekDeepSeekCoPilotCoPilotMidjourneyMidjourney
    View All Directories
    OverviewPromptsBlogVideosGuidesCoursesCommunityModelsLoRAsComfyUI WorkflowsTrending
    Stable DiffusionBlogBuilding a browser-only tool to turn QR codes into Lego bricks
    Back to Blog
    Building a browser-only tool to turn QR codes into Lego bricks
    webdev

    Building a browser-only tool to turn QR codes into Lego bricks

    Drazen Bebic June 17, 2026
    0 views

    How I built a 100% client-side React app that converts data into optimized Lego QR code blueprints and exports BrickLink XMLs.

    title: Building a browser-only tool to turn QR codes into Lego bricks published: true description: How I built a 100% client-side React app that converts data into optimized Lego QR code blueprints and exports BrickLink XMLs. tags: webdev, react, typescript, showdev cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wl3z7vt4jh3y1n0yczrm.png

    Some time ago I built our home WiFi password QR code with Lego bricks. I ordered a white 32x32 baseplate and manually mapped the tiles from the QR code on my phone, then ordered the flat tiles from Lego Pick a Brick. It was a bit of a tedious process, especially making sure I optimized the parts list so I wasn't just buying hundreds of 1x1 tiles.

    Since I'm a developer, I really wanted to build a website that would help others do this faster and easier. I bought the domain about a year ago, and last weekend, with a little help from Claude to speed up the boilerplate, I finally built it:

    brickcodes.com

    Screenshot of

    The technical approach:

    • Everything happens in the browser. Nothing is sent to a backend or saved in a database anywhere.
    • The app takes the encoded URL/text, generates the matrix, and maps it specifically for a 32x32 grid.
    • The coolest part is that it calculates an optimized parts list and exports a valid BrickLink XML file. You can just upload it to BrickLink and immediately order exactly what you need. It also generates a visual instruction guide for the build.

    The tool is entirely free. I'm not gonna tell you what you can do, play around with it - it's fun. It's just a little side project built with React and TypeScript that I hope will be useful to some fellow makers.

    PS: I'm looking for frame recommendations that would fit these 32x32 baseplates nicely. If you know a website that has some good frames (or a solid IKEA hack), let me know in the comments.

    Thoughts, critique, and general feedback are more than welcome!

    Tags

    webdevreacttypescriptshowdev

    Comments

    More Blog

    View all
    Context bankruptcy: The case for strategic forgetting for AI Agentsai

    Context bankruptcy: The case for strategic forgetting for AI Agents

    Most of us have seen a coding agent fail to complete a task we know it can do. We just don't...

    J
    James O'Reilly
    Parallel Compliance Engine: Drive-to-Sheets Multi-Agent Orchestrationgooglecloud

    Parallel Compliance Engine: Drive-to-Sheets Multi-Agent Orchestration

    When building Generative AI applications, developers often encounter a massive bottleneck: sequential...

    A
    Aryan Irani
    Is It Ethical to Post and Ask About Circuits on Dev.to?discuss

    Is It Ethical to Post and Ask About Circuits on Dev.to?

    I’ve been thinking about sharing some electronic circuit posts on Dev.to — small circuits, DIY...

    C
    codebunny20
    The One-Click Exporter: AI Studio Antigravity, Probed to Its Limitsagents

    The One-Click Exporter: AI Studio Antigravity, Probed to Its Limits

    What nobody tells you about exporting your multi-agent prototype to a local workspace. Every...

    L
    leslysandra
    Guarding the till while autonomous data agents do the diggingagenticarchitect

    Guarding the till while autonomous data agents do the digging

    Autonomous agents are genuinely good at answering messy business questions. Give one an LLM and a set...

    S
    Sireesha Pulipati
    Return on Attention: Why AI Code Reviews Are Wearing Us Outai

    Return on Attention: Why AI Code Reviews Are Wearing Us Out

    PR volume went up, ticket quality didn't, and the gap got filled with LLMs on both sides of the review: bots reviewing, bots replying, bots occasionally arguing with bots about priorities that only existed in a teammate's head. Our CEO named the actual problem, and it's bigger than code review.

    C
    christine

    Stay up to date

    Get the latest Stable Diffusion prompts, rules, and resources delivered to your inbox weekly.

    Neura Market LogoNeura Market

    Discover the best AI prompts, plugins, and resources for Stable Diffusion and more.

    Content Types

    • Rules
    • Prompts
    • MCPs
    • Agents
    • Guides

    Platforms

    • ChatGPT Directory
    • Claude Directory
    • Gemini Directory
    • Cursor Directory
    • Grok Directory
    • Perplexity Directory
    • DeepSeek Directory
    • CoPilot Directory
    • Stable Diffusion Directory
    • Midjourney Directory
    • All Directories

    Resources

    • Blog
    • Documentation
    • Help Center
    • Marketplace

    Legal

    • Privacy Policy
    • Terms of Service

    © 2026 Neura Market. All rights reserved.

    |

    Not affiliated with any AI platform vendors.

    Ready-made automations for this

    Workflows from the Neura Market marketplace related to this Stable Diffusion resource

    • RAG Agents Workflow for Optimized Sales CRM Automationn8n · $19.99 · Related topic
    • Generate Platform-Optimized Social Media Content with GPT-4on8n · $19.99 · Related topic
    • Automated Daily SEO-Optimized Blog Post Generatorn8n · $24.99 · Related topic
    • Generate and Publish SEO-Optimized Blog Posts to WordPressn8n · $24.99 · Related topic
    Browse all workflows