HTML Image Editor

Paste HTML. Tweak it. Export PNG.

Open editor
This app edits HTML and exports PNG.

It does not turn screenshots into code by itself.

ChatGPT makes the HTML first.

Upload the screenshot and prompt to ChatGPT, then paste the code here.

Workflow: Screenshot → ChatGPT → HTML → PNG

1

Screenshot

Capture the element, but do not upload it to this app.

YouTube comment screenshot
2

Copy Prompt

Use the green button, then paste the prompt into ChatGPT.

3

ChatGPT

ChatGPT receives the screenshot and prompt, then returns HTML code.

<div id="preview">
  ...
</div>
4

Paste HTML

Only now paste the generated HTML into Live Code Editor.

<div id="preview" ...>
5

Tweak

Use Tweak Parameters to adjust text, images, and sizes.

Tweak Parameters
6

Export

Export the finished visual as a PNG.

preview
Step 5

Tweak the visuals

Try the controls

Anything named in Tweak Parameters can be changed before export.

Profile avatar
@JorgeFoxHounder pred 2 tyzdnami

Please never stop doing these, house chores and work is better with these ❤️

6
Reply

Tweak Parameters

Step 5

Graph Height

Slider or number
ladder
Delta = 20.2%
65.5%
Entered
(n=84)
45.3%
Not entered
(n=426)

Tweak Parameters

Entered Bar Height
Changes the orange bar