DEV Community: Bowen Tu

HtmlDrag v2.1: AI Creator now supports PDFs, slides, and spreadsheets

Bowen Tu — Mon, 04 May 2026 11:36:50 +0000

HtmlDrag v2.1 is live.

This release expands AI Creator from a document/image workflow into a broader file-to-HTML workflow.

You can now start from:

PDF
PPT / PPTX
Excel / XLSX
CSV
Word
Markdown
TXT
Images
Custom text prompts

The goal is to make it easier to turn existing business materials into editable HTML pages.

For example:

reports into web pages
slide decks into presentation pages
spreadsheets into dashboards or comparison sections
documents into landing pages or structured content pages
images and notes into editable HTML drafts

After generation, the result is still editable inside HtmlDrag, so you can refine text, layout, images, sections, and structure visually.

v2.1 also improves page interaction mode, long-image downloads, dynamic content editing, chart display, and generation stability for complex files.

HtmlDrag v2.0: AI creation now has File Mode, Thinking, and a redesigned Template Mode

Bowen Tu — Fri, 17 Apr 2026 06:57:56 +0000

I just shipped the biggest HtmlDrag update so far: v2.0.

This release is focused on one thing: making AI-assisted HTML creation more practical.

What’s new
AI Creator
The AI side of HtmlDrag is now a much bigger part of the product.

File Mode
You can upload source files and turn them into editable HTML pages.

Supported formats:

JPG / JPEG / PNG / WEBP
DOCX / MD / TXT
Thinking
For more complex source material, Thinking helps the system spend more effort understanding the content before generating structure and output.

Template Mode, redesigned
I rebuilt the original AI generation flow to make it more usable in real workflows.

New additions:

custom styles
custom HTML sizes
Privacy
Files are processed in a local-first flow and won’t be stored in the cloud after processing.

A founder note
I used AI heavily to complete this upgrade.
That was intentional.
I wanted this release to reflect not only the product’s AI capability, but also my own ability to guide AI into something structured and useful.

What’s next
I’m planning to add:

PDF support
PPT support
Changelog
launched AI Creator
added File Mode
added image and document support
added Thinking
redesigned Template Mode
added custom styles
added custom HTML sizes
clarified the local-first / no cloud storage-after-processing privacy flow

Shipping note: One-click cleanup for URL import popup/overlay in HtmlDrag

Bowen Tu — Wed, 04 Feb 2026 13:34:04 +0000

Tiny UX improvement, big productivity win.

HtmlDrag lets you import HTML from a URL.
But after import, the URL popup/overlay sometimes blocks the canvas.

So I shipped: one-click cleanup → restore a clean editing surface.

GIF demo ↓
If you tweak HTML for emails/landing pages, I’d love feedback.

2026 Job Search: Build a Professional Portfolio in 5 Minutes with HTML5 UP Templates, No Coding Required

Bowen Tu — Sun, 04 Jan 2026 11:00:23 +0000

2026 Job Search: Build a Professional Portfolio in 5 Minutes with HTML5 UP Templates, No Coding Required

Industry forecasts for the 2026 global job market indicate a significant surge in professional mobility. With more talent than ever looking for new opportunities in the first half of 2026, standing out has become a global necessity. Meanwhile, job seekers now submit an average of 32 to 200+ applications before receiving an offer.

In this competitive job market, a professional portfolio website can help you stand out from the crowd. Research shows that 74% of people are more likely to trust someone with an established personal brand, and 93% of recruiters prefer candidates with an online presence showcasing their work.

The problem? Building a portfolio website from scratch means either hiring a designer or learning to code. For job seekers pressed for time, that's too slow.

To help job seekers move faster, I'm sharing a "shortcut" that skips the technical setup. By using a visual editor that can import any existing website via URL, you can leverage world-class templates like HTML5 UP without ever touching a line of code.

This guide shows you how to use the URL import feature to grab an HTML5 UP free template and customize it into your own portfolio—in just 5 minutes, without writing a single line of code.

Why Choose HTML5 UP Templates

HTML5 UP is a free template library that's been running for 17 years, with over 12 million downloads. Here's what makes their templates special:

Completely Free — Licensed under Creative Commons, free for personal and commercial use
Responsive Design — Mobile-first approach, looks perfect on any device worldwide
High-Quality Code — Created by AJ, a professional designer who also founded Carrd.co
Pure Static HTML — Perfect for URL import and visual editing

Today we'll use the Miniport template—a clean, single-page portfolio template perfect for developers, designers, and freelancers.

Traditional Approach vs URL Import

Traditional Approach:

Download the HTML5 UP template zip file
Open HTML files in a code editor
Hunt through complex code to find what to change
Carefully edit, hoping you don't break anything
Constantly refresh the browser to preview changes

URL Import:

Paste the HTML5 UP template URL
Click directly on the page to edit
What you see is what you get—live preview
Export HTML and deploy

The whole process takes 5 minutes, no coding knowledge required.

Step-by-Step: Build Your Portfolio

Let's walk through a real scenario: you're a professional looking to showcase your career achievements before the 2026 hiring season kicks off.

Step 1: Import the Miniport Template via URL

Open htmldrag.com and use the "Fetch from URL" feature. Paste the HTML5 UP Miniport template URL:

https://html5up.net/uploads/demos/miniport/

The page loads instantly into the editor, with every element ready to edit.

Paste the template URL, instantly editable

Step 2: Personalize Your Hero Section

Click on the main heading "Hi. I'm Jane Doe." and replace it with your own name. Then, click the sub-text below it to add a brief professional summary, such as "Marketing Specialist | Brand Growth & Content Strategy Expert".

Click text to edit directly, add your info

Step 3: Update Your Professional Skills

The template includes a section for your core competencies. To make it your own, simply click the old icon, delete it, and open the built-in Icon Library from the sidebar. Choose a modern, high-quality SVG icon and insert it with one click.

Skills and descriptions are all editable

Step 4: Replace Project Images

Click on the portfolio images to upload screenshots of your own projects. This is the most important part—let recruiters see your actual work at a glance.

Click images to replace with your real work

Step 5: Update Contact Information

Scroll to the bottom and edit the contact form title and button text. You can also add links to your GitHub, LinkedIn, or other professional profiles.

Contact info updated in one click

Step 6: Preview and Export

Visual editing and high-quality image/snapshot exports are completely free. To take your project to the next level, exporting production-ready HTML code is available as a premium feature.

Professional HTML export, ready for production deployment

Who Is This For

Developers / Programmers: Quickly build a personal tech blog or portfolio
Designers / Creatives: Display design work and case studies without coding
Marketers & Solopreneurs: Build a high-converting landing page for your brand
Freelancers: Build your personal brand to attract clients

Deploy Your Portfolio

After exporting the HTML, you can deploy for free on platforms like GitHub Pages, Vercel, Netlify, or Cloudflare Pages.

Get Started

The 2026 job search season has begun. Open htmldrag.com and use "Fetch from URL" to import any HTML5 UP template. No signup required to try out the editor and see your portfolio come to life instantly.

Originally published at htmldrag.com

Building a Visual HTML Editor with AI: A Marketer's Journey to Solving the "Email Template" Nightmare

Bowen Tu — Fri, 26 Dec 2025 04:23:44 +0000

Stop Fighting Raw HTML: Visual Editing for Marketers and Non‑Coders

If you’ve ever opened an HTML file and thought, “I just want to move this block down a bit… why is this so hard?”, you’re not alone.

Maybe you:

copy templates from your email service provider and need to tweak them,
get landing pages from AI tools but still have to “fix the last 20%”,
receive HTML from design or dev teams that doesn’t quite match the latest copy.

For most marketers, growth people, and busy operators, editing HTML directly feels like punishment. You don’t want to learn CSS selectors just to move a button.

That’s why I built HtmlDrag — a visual HTML editor designed for non‑developers.

What is HtmlDrag?

HtmlDrag lets you load any existing HTML page and edit it visually, on a canvas, with drag‑and‑drop.

You still get clean HTML at the end, but you don’t have to work in HTML.

You can:

import HTML from a URL,
upload a local HTML file,
or just paste raw HTML into the editor.

HtmlDrag then renders that page in an editor where you can:

move sections up and down,
edit text inline,
tweak spacing and layout,
hide or delete blocks,
and visually fine‑tune the “last mile” that’s usually so painful.

All of this happens in your browser — no heavy software, no coding required.

Who is it for?

HtmlDrag is deliberately not built for front‑end engineers who enjoy editing code in VS Code.

It’s built for:

Email marketers who need to fix HTML newsletters, EDM campaigns, or transactional emails.
Growth / ops people who receive HTML from tools or teammates and just need to “make it look right”.
Busy professionals who occasionally have to touch HTML (invoices, reports, simple landing pages) but don’t want to become developers.

If you’ve ever:

broken a layout by touching the wrong <div>,
spent 30 minutes trying to align one button,
or given up and asked a developer friend to “just fix it for me”,

HtmlDrag is meant to remove that frustration.

How HtmlDrag works (in practice)

Here’s a typical workflow:

Bring in your HTML
- Paste a page URL (for example, your landing page or a hosted email preview).
- Or upload an .html file exported from your ESP / email builder.
- Or paste raw HTML from another tool.
Edit visually on the canvas
- Click any block to edit the text directly.
- Drag sections to reorder layout without touching code.
- Hide, duplicate, or remove sections that you don’t need.
- Adjust spacing and layout visually, with true WYSIWYG feedback.
Review and polish
- Check how your page looks after small tweaks.
- Make sure headlines, CTAs, and disclaimers match your latest messaging.
- Clean up things you usually ignore because “it’s in the HTML”.
Export or download
- Free: download your design as images (for reviews, documentation, or sharing with teammates).
- Paid: export the final, cleaned HTML when you’re ready to ship.

This way, you can stay in a visual flow most of the time and only think about “HTML” when you actually need the code.

What’s free and what’s paid?

To avoid any confusion, here’s the pricing model in plain language:

You can start using HtmlDrag for free.
- Load pages (via URL, file upload, or paste).
- Edit them visually on the canvas.
- Download your designs as images for free (for internal reviews, documentation, or sharing).
HTML export is a paid feature.
- When you’re ready to take your edited design into production, you can upgrade to a paid plan.
- Paid users can export the final, cleaned HTML code for use in email platforms, landing pages, or other tools.

So the workflow is:

Explore and edit visually for free.
Use free image downloads for feedback, approvals, and internal sharing.
Upgrade to unlock HTML export when you actually need the production code.

No promise of “free HTML export”, no hidden catch — just a clear split between free usage and paid export.

Common use cases

Here are some concrete scenarios where HtmlDrag can save you time.

1. Fixing an email template that almost works

You have an HTML newsletter from:

your email service provider,
an agency,
or an older campaign.

It mostly looks right, but:

the hero section spacing feels off,
a disclaimer got longer and broke the layout,
you want to test a different CTA block.

With HtmlDrag, you:

Import the HTML.
Tweak layout, text, and blocks visually.
Download images for internal review (for free).
Once approved, export the final HTML (paid) and paste it back into your ESP.

You never have to touch <table> tags or nested <div>s.

2. Cleaning up an AI‑generated landing page

Maybe you use an AI page builder or a no‑code tool that exports HTML.

The first draft is okay, but the final 10–20% still needs human judgment:

tighten up copy,
reorder sections,
remove obviously AI‑ish filler.

With HtmlDrag, you:

Paste the exported HTML (or use the public URL).
Edit copy and layout visually, like dragging slides in a deck.
Once it feels human and on‑brand, export the HTML (paid) for your actual hosting or landing page tool.

3. Updating HTML documents you don’t want to rewrite

Some HTML files live in places that are annoying to edit, like:

system‑generated invoices or reports,
internal documentation exported as HTML,
simple HTML microsites created years ago.

Instead of rewriting them from scratch, you can:

Upload the existing HTML.
Make small but important changes visually — new logo, updated wording, changed contact details.
Share image previews for sign‑off (free).
Export updated HTML (paid) only when needed.

Why build another editor?

There are great tools for creating emails or pages from scratch.

HtmlDrag is more focused on:

taking existing HTML (from any source),
letting non‑developers make changes safely,
and then giving you clean, exportable HTML when you’re ready.

It sits between “no‑code builders” and “raw code editors”:

less rigid than templates locked inside a specific platform,
much friendlier than hand‑editing HTML when you’re not a developer.

Try HtmlDrag

If you often find yourself saying:

“I just need this HTML to look right, I don’t want to learn CSS.”

then HtmlDrag is for you.

You can open it here:https://htmldrag.com

Start by loading any page or HTML file you already have.
Play with the visual editor and see how it feels.
Use free image downloads to share drafts or get feedback.
And whenever you need the actual HTML code, you can upgrade to unlock HTML export.

I’d love feedback from marketers, growth people, and anyone who has to “touch HTML” but doesn’t want to become a front‑end engineer.

If this sounds like you, give HtmlDrag a try and tell me what part of your workflow it makes easier.