Back to selected work

OPEN-SOURCE ENGINEERING

HTML to Gutenberg
From frontend markup to editable WordPress blocks.

A developer tool that turns HTML into editable WordPress Gutenberg blocks—reducing the manual work between a finished frontend design and a reusable CMS component.

ROLECreator and sole developer

THE CONTEXT

The challenge

The original workflow combined manual HTML-to-Gutenberg conversion with WordPress block integration, including ACF-based components. Each new block required translating markup and styles into the editor’s block structure and supporting code. The work began as a way to reduce that repetitive setup, then evolved into a reusable developer tool.

THE WORK

What was built

01

Built a conversion workflow that transforms valid HTML into editable Gutenberg block code, with options for block title, slug, namespace, category, and asset dependencies.

02

Extended the tool from local file generation into a package-oriented workflow, including an asynchronous job mode and a JSON manifest for generated output.

03

Added asset handling and packaging: downloaded page assets can be uploaded to Cloudflare R2, and generated bundles are compressed in memory before upload.

04

Maintained a legacy output mode for existing tooling while evolving the package and its documentation.

CAPABILITIES

What it enables

Editable block output

Transform HTML into WordPress Gutenberg blocks that can be edited in the block editor.

Asset-aware conversion

Resolve and collect supporting CSS, JavaScript, and page assets as part of the workflow.

Two output paths

Use legacy local output or job-based output that returns a structured manifest.

Cloud packaging

Upload generated files to Cloudflare R2 and package the output ZIP in memory.

EVIDENCE

What can be verified

Public source

Open-source repository with implementation, usage documentation, and tests.

Published package

The npm package metadata identifies version 4.2.26 and describes HTML-to-Gutenberg conversion.

Recent adoption

620 npm downloads between 4–10 November 2026, according to the public npm downloads API.

12-month adoption

17,160 npm downloads between 11 November 2025 and 10 November 2026.

Documented workflow

The README documents legacy and job output modes, R2 delivery, asset handling, and generated manifests.

YOUR NEXT CHALLENGE

Let’s make the
next step clear.

Start a conversation