DEV Community: BlinkNBuild

I Built a Free OLED Pixel Editor for Arduino & ESP32 🖊

BlinkNBuild — Sun, 19 Apr 2026 05:15:17 +0000

I kept converting OLED bitmaps manually for every Arduino project — drawing on graph paper, counting pixels, writing byte arrays by hand.

So I built a tool that does all of it visually.

🔴 Live → oled-pixel-editor.netlify.app
⭐ GitHub → S-SUJAN-S/oled-pixel-editor

📺 Watch the full tutorial on how to use this:

What it does

Think MS Paint — but every pixel maps directly to a pixel on your SSD1306 OLED display.

15 shape tools — circle, ellipse, triangle, star, arrow and more
Selection system — move, resize, copy, paste, crop
16 resolution presets — 128×64, 128×32, 96×16 and more + custom up to 1024×1024
Export as PNG, CSV, C Array, or a complete Arduino sketch (.ino)
80-step undo/redo, touch + pinch-zoom support
Single HTML file — no install, works offline

The export that actually matters

Click Arduino Sketch → get a complete .ino ready to flash:

display.clearDisplay();
display.drawBitmap(0, 0, myBitmap, 128, 64, SSD1306_WHITE);
display.display();

Open in Arduino IDE → Upload. Done.

⚠️ Currently configured for ESP8266 NodeMCU. Multi-board support (ESP32, Uno, Nano) is on the roadmap.

What's next

[ ] Image import — auto-dither PNG/JPG to monochrome
[ ] Video import — frame-by-frame OLED animations
[ ] Multi-board export — ESP32, Arduino Uno/Nano, STM32

It's free, open source, and I'm actively building on it.
If you use OLED displays in your projects, give it a try and let me know what you think 👇

— Sujan, BlinkNBuild

I Vibe Coded a Balloon Popping Game Using Claude AI 🎈

BlinkNBuild — Tue, 17 Mar 2026 04:00:00 +0000

What I Built 🎮

A fully playable balloon popping arcade game that runs entirely in the browser — built using Claude AI (vibe coding). No React, no libraries, no build tools. Just one index.html file.

🎈 Play it live → balloon-blaster.netlify.app
💻 Code → github.com/S-SUJAN-S/balloon-blaster

What is Vibe Coding?

Vibe coding = you describe what you want to an AI, it builds it, you iterate, you ship.

No boilerplate. No setup. No framework debates. Just:

Describe the idea
Let the AI build it
Test, tweak, ship

I used Claude AI for the entire thing — and honestly it was a great experience.

What's in the Game

🎯 3 balloon sizes with different point values
💥 Combo multiplier system
⚡ 8 power-ups — Rapid Fire, Shield, Tri-Shot, Freeze, Extra Life, Bomb, Double Score, Laser
🎆 Particle burst effects on every pop
🌠 Animated star background with meteor streaks
📱 Mobile touch support
💾 High score saved locally
🔊 Sound effects — all synthesized in-browser, zero audio files
3 difficulty levels — Easy, Medium, Hard

How I Built It

Honestly? I just described what I wanted to Claude AI and iterated.

"Make a balloon shooting game in a single HTML file, portrait canvas, with a shooter at the bottom, balloons falling from the top, combo system, and power-ups"

From there it was just:

Testing what worked
Describing what to fix or add
Deploying to Netlify with a drag and drop

Total time from idea to live URL — a couple of hours.

Run It Locally

git clone https://github.com/S-SUJAN-S/balloon-blaster.git
cd balloon-blaster
# Just open index.html in your browser

No npm install. No config. Just open and play.

Deploy in 30 Seconds

Go to netlify.com
Drag your index.html onto the drop zone
Done — live URL instantly

What I Learned

Vibe coding is a real workflow. You don't need to understand every line to ship something fun and working. The key is knowing what you want to build clearly enough to describe it — the AI handles the how.

Drop a comment if you want me to do a proper walkthrough of the vibe coding process — I'll make a full video on BlinkNBuild!

🎮 Play → balloon-blaster.netlify.app
💻 Code → github.com/S-SUJAN-S/balloon-blaster
📺 Watch → youtube.com/@BlinkNBuild

Built with Claude AI ⚡ | BlinkNBuild

I Built a 3D Snake Game with Three.js — Runs in a Single HTML File

BlinkNBuild — Mon, 02 Mar 2026 14:31:43 +0000

I challenged myself to build a full 3D browser game with zero dependencies and no build step. Just one index.html and a Three.js CDN link.

The result is Serpentine — a 3D snake game with WebGL graphics, particle effects, and mobile joystick support.

🎮 Gameplay Demo

✨ Features

3 difficulty levels — Easy, Medium, Hard
WebGL 3D graphics with particle effects on food pickup
Mouse, Joystick & Swipe control modes
Persistent high scores per difficulty
Achievement toasts at score milestones
Zero dependencies — pure HTML + JS

🕹️ Controls

Input	Action
Mouse	Guide the snake
WASD / Arrows	Keyboard
Space	Pause / Resume
M	Switch control mode

🔗 Links

🎮 Play Live → serpentine-game.netlify.app
⭐ GitHub → github.com/S-SUJAN-S/serpentine-game
🎲 itch.io → s-sujan-s.itch.io/serpentine-3d-snake

Feel free to fork it and build on top — the source is clean and readable!

Building a Free Markdown to PDF Converter (No Sign-ups, 100% Browser-Based)

BlinkNBuild — Tue, 24 Feb 2026 18:58:07 +0000

The Problem

I was constantly frustrated with existing markdown to PDF converters. Most of them:

Required sign-ups and accounts
Had paywalls or subscription fees
Uploaded your files to their servers (privacy concerns)
Had clunky interfaces
Broke formatting on code blocks or math equations

I just wanted something simple that worked in my browser without jumping through hoops. So I decided to build my own.

What I Built

A completely free, browser-based markdown to PDF converter that runs 100% client-side. No servers, no data collection, no sign-ups required.

Try it here: https://free-markdown-to-pdf.netlify.app/

GitHub: https://github.com/S-SUJAN-S/free-markdown-to-pdf

Key Features

Live Preview - See your formatted content as you type
Syntax Highlighting - Code blocks look professional with Highlight.js
Math Equations - LaTeX math rendering using KaTeX
Multiple Themes - Dark mode, light mode, and high contrast
Customization - Adjust fonts, spacing, margins to your liking
Privacy First - Everything runs in your browser, zero data collection
No Installation - Just open the URL and start using it

Tech Stack

I kept it simple and used:

React (loaded via CDN)
Babel Standalone (for in-browser JSX compilation)
Marked.js (markdown parsing)
Highlight.js (syntax highlighting for code)
KaTeX (LaTeX math rendering)
Google Fonts (Fraunces, DM Sans, JetBrains Mono)

The entire thing is a single HTML file - no complex build process, no npm dependencies to install locally. Just clone and open!

How It Works

The workflow is super simple:

Paste your markdown content
See it formatted in real-time
Customize if needed (fonts, themes, spacing)
Use your browser's print function to save as PDF

Since everything runs client-side, your content never leaves your browser. I literally cannot see what you're converting even if I wanted to.

Why a Single HTML File?

I wanted this to be as accessible as possible. Anyone should be able to:

Clone the repo and open index.html
Host it anywhere (GitHub Pages, Netlify, their own server)
Modify it without needing to understand webpack or build tools
Use it offline once the page loads

Plus, it makes the code easy to read and understand for beginners.

Use Cases

I built this originally to save formatted conversations and notes, but people can use it for:

Converting documentation
Creating PDFs from markdown notes
Formatting research papers
Saving formatted conversations from AI tools
Quick markdown previewing
Any markdown → PDF needs

Challenges I Faced

1. Math Rendering

Getting KaTeX to work properly with various LaTeX syntax was tricky. I had to handle both inline math ( $...$ ) and display math ($$...$$) correctly.

2. Print Styling

Making sure the PDF output looked exactly like the preview required a lot of CSS tweaking with @media print queries.

3. Theme Switching

Implementing multiple themes while maintaining consistency across all UI elements took more work than expected.

4. Code Block Formatting

Ensuring code blocks looked good in both the preview and the final PDF required careful styling.

What's Next?

I'm thinking about adding:

Export to Word/HTML formats
Preset templates for different document types
Batch conversion (multiple files at once)
More theme options
Table of contents generation
Custom CSS injection

What features would you find useful? Let me know in the comments!

Open Source

The project is fully open source with an MIT license. Feel free to:

Use it for any purpose
Fork it and make your own version
Submit PRs for improvements
Report bugs or request features

Links:

🌐 Live Demo: https://free-markdown-to-pdf.netlify.app/
💻 GitHub Repo: https://github.com/S-SUJAN-S/free-markdown-to-pdf

Try It Out!

I'd love to hear your feedback. If you find it useful, give it a star on GitHub! And if you find bugs or have feature suggestions, open an issue.

Happy converting! 🚀

Have you built any side projects to solve your own problems? Share them in the comments!