New A Non-Blocking Image Editor with Nuxt 4 + TypeScript + Web Workers + Comlink + OffscreenCanvas

Learn modern web development by actually building things

Hands-on tutorials, open-source projects, and experiments — deep dives into Three.js, Nuxt and TypeScript, written while building the real thing.

Explore tutorials View projects

particle-galaxy.client.ts live

StackNuxt 4

LangTS

RenderWebGL

FPS60

Build412ms

01  import * as THREE from 'three'
02
03  const geometry = new THREE.BufferGeometry()
04  geometry.setAttribute(
05    'position', new BufferAttribute(positions, 3)
06  )
07
08  const points = new THREE.Points(geometry, material)
09  scene.add(points)

Compiling the shader

Step 2 of 3 — every line explained in the tutorial.

30+: Tutorials
100%: Open source
2022: Writing since

The approach

Tutorials that turn ideas into things you can ship

No copy-paste dumps. Each project is built end to end so you understand the decisions, not just the code.

Built in the open

Every tutorial ships with a working repo. Clone it, break it, and read the commits that got it there.

Real-world stacks

Nuxt 4, TypeScript, Three.js, Firebase and Mapbox — the same tools I use on production work, not toy demos.

Step by step, no gaps

Each guide walks the whole path — setup, the tricky middle, and deploying it somewhere people can actually visit.

Gothenburg, SE Open to work

About

Hi, I'm Marcus — a developer who learns by shipping

Web developer, freelancer, former e-sports professional and digital creator from Gothenburg, Sweden.

I built this site as a place to document my coding journey and to share the projects that hopefully inspire you or teach you something new.

Vue / NuxtTypeScriptThree.jsTailwindFirebaseMapbox

Work with me

Latest

Articles & tutorials

Deep dives, practical guides and hands-on projects — published as I build them.

View all articles

A Non-Blocking Image Editor with Nuxt 4 + TypeScript + Web Workers + Comlink + OffscreenCanvas

17 min

Aug 19, 2026

A Non-Blocking Image Editor with Nuxt 4 + TypeScript + Web Workers + Comlink + OffscreenCanvas

Move every pixel of a photo editor off the main thread: a typed Comlink RPC boundary, a canvas handed to a worker with transferControlToOffscreen, frame-coalesced rendering, and a full-resolution export that streams progress back — all SSR-safe inside Nuxt 4.

Read article

Tool-Calling Trip Planner with Nuxt 4 + TypeScript + AI SDK + Mapbox GL JS

18 min

Aug 18, 2026

Tool-Calling Trip Planner with Nuxt 4 + TypeScript + AI SDK + Mapbox GL JS

Build a Nuxt 4 app where an LLM cannot invent a coordinate: Zod tool schemas in the shared/ folder, Mapbox geocoding and directions running server-side, and a map that redraws itself from the streamed tool results.

Read article

Passwordless Sign-In with Nuxt 4 + TypeScript + Passkeys (WebAuthn) + Nitro SQL

16 min

Aug 17, 2026

Passwordless Sign-In with Nuxt 4 + TypeScript + Passkeys (WebAuthn) + Nitro SQL

Ship real passkey authentication on a plain Nuxt 4 server: nuxt-auth-utils for the WebAuthn ceremony, Nitro's built-in db0 SQL layer for users and credentials, sealed cookie sessions, and the rpID gotchas that only appear once you put nginx in front.

Read article

A Type-Safe Data Layer with Nuxt 4 + TypeScript + Drizzle ORM + SQLite + Zod

15 min

Aug 14, 2026

A Type-Safe Data Layer with Nuxt 4 + TypeScript + Drizzle ORM + SQLite + Zod

Build a Nuxt 4 backend where the database schema is the only source of truth: Drizzle for the tables, drizzle-zod to derive request validators from them, h3 validated handlers at every edge, and Nitro tasks for scheduled background work.

Read article

Realtime Planning Poker with Nuxt 4 + TypeScript + Nitro WebSockets + Pinia

14 min

Aug 13, 2026

Realtime Planning Poker with Nuxt 4 + TypeScript + Nitro WebSockets + Pinia

Build a self-hosted realtime app with no third-party backend: Nitro WebSockets for the transport, Nuxt 4 shared types for one contract on both sides, Pinia for derived client state, and useStorage as a swappable persistence seam.

Read article

Nuxt 4 Mapbox: How to Add Interactive Maps with Mapbox GL JS

11 min

Jun 3, 2026

Nuxt 4 Mapbox: How to Add Interactive Maps with Mapbox GL JS

Learn how to use Mapbox with Nuxt 4. Add interactive Mapbox GL JS maps, markers, popups and GeoJSON layers in a Nuxt 4 + TypeScript app, step by step.

Read article

Three.js & WebGL

Particle galaxies, shaders, lava-lamp visuals and 3D globes — built from an empty canvas up.

Nuxt & Vue

SSR, content pipelines, PWAs and the small architectural calls that keep an app maintainable.

TypeScript patterns

Type-safe data layers, Zod schemas and API contracts that hold up once the project grows.

Ship & deploy

Docker, Nginx, PM2 and Firebase — the last mile between localhost and a real URL.

Start here

Pick a project and build it this weekend

Every guide is free, open source, and written to be followed start to finish.

Browse all tutorials Star on GitHub