Project HTMLifier

Convert a Scratch project to HTML

This packages your Scratch project into a single HTML file that can run on its own in a web browser. The HTML file will be pretty big because it contains the entire Scratch engine (2.6 MB) and the costume and sound files used in the project.

Note: The TurboWarp Packager has better performance and can produce .exe files. Refer to the See also section for more alternatives.

If you want to view or edit the HTML file, you can use the specialized Large File Editor to hide the long lines that may hang or crash normal text editors.

Update history

See the code and previous versions on Github.

2021-08-12 (download)

2021-08-09 (download)

2021-08-08 (download)

Past updates

2021-03-16 (download)

  • New cloud behaviours:
    • ☁ url contains the current URL of the web page.
    • ☁ pasted contains the last pasted text by the user.
    • ☁ username, when set, will change what the "username" block reports.
  • Fixed the background image not showing in full screen.
  • Fixed the progress bar being shown under the loading image.

2021-02-07 (download)

  • Save the options in the URL
  • New customisation options:
    • Background image
    • Cursor
    • Favicon
    • New loading bar design with customisable colours
    • Loading screen image from a URL
      • Option to stretch only the loading screen image
  • Option to show start/stop buttons (equivalent to the green flag/stop sign)
  • New special cloud behaviours:
    • Better support for ☁ eval returning Promises
    • ☁ open link opens a URL in a new tab.
    • ☁ redirect redirects to a URL.
    • ☁ set clipboard tries to copy text to the clipboard.
    • ☁ set server ip changes the cloud server URL.
  • Ability to distinguish between left/right modifier keys using <key (join [code_ShiftLeft] []) pressed?>>, for example.
  • Clicking on a variable slider no longer gives it focus, so keys will continue to work.
  • A bookmarklet creator
  • BREAKING: The mouse lock position now sets mouse x/y to the accumulative mouse position, which should be more reliable. This works best with the "Remove limits" option.
  • Updated CSS by Mr. Cringe Kid
  • Fixed the HTMLification log progress not resetting
  • Also, the primitive cloud server has been updated.

2020-12-18

  • Specific mouse buttons can now be detected using <key (join [MouseN] []) pressed?>, where N can be 1 for left click, 2 for middle click, 3 for right click, and 0 for touch/pen.
  • Fixed an issue where Scratch 2.0 projects with bitmap costumes wouldn't work.

2020-06-13 (download)

  • More options for styling variable/list monitors
  • Option to generate a .zip of files
  • Option to preview the HTMLified project
  • Readded the option for a progress counter despite lack of demand
  • Warn if a file might be too large for JavaScript to HTMLify
  • Fixed HTMLifying 2.0 projects

2020-06-01 (download)

  • Option to remove clone/list length limits
  • Option to hide the cursor
  • Ability to distinguish between cloud variables for localStorage and the server (and run JavaScript using cloud variables)
  • Option for rudimentary pointer lock
  • Fixed mouse position and unresized lists not showing
  • Default project changed to one of ScratchCat's
  • Unfortunately, as part of these changes, I removed the option for a progress bar. If there's demand, I'll try to add it back.

2020-05-01

2020-03-29 (download)

  • Fixed custom stage sizes

2020-03-27

  • Show an image such as a gif while loading
  • Fixed dragging sprites simulating another green flag click

2020-01-06

  • An offline version of the HTMLifier

2019-12-25

  • An option to use a custom cloud server for cloud variables instead of saving to localStorage

2019-11-23

  • A fullscreen button
  • An option to change monitor colours

2019-10-05

  • New ask box

2019-09-28

  • A status text that shows the assets loaded
  • Support the video extension
  • Support draggable sprites

2019-08-08

  • Removed "Scratch" from the name of this utility just in case

2019-07-27

  • Support 16:9 projects
  • Simplify the number of modes for HTMLification

2019-07-13

  • Cloud variables store in localStorage

2019-06-29

  • Upload project file instead of using project ID
  • Toggle compatibility and turbo mode

2019-03-31

  • Variable and list watchers

2019-02-09

  • Project start

Credits

Made by Sheep_maker, who used scratch-vm, JSZip, Deno, React, and their dependencies for this project.

CSS by Mr. Cringe Kid.

See also

Depending on your use case, the HTMLifier may not be the best option for you. The HTMLifier prioritizes accuracy by using almost the same engine that vanilla Scratch uses, sacrificing speed and editability.

If you want better performance, compile the project to JavaScript: Phosphorus (Scratch 2.0 only), Forkphorus, and TurboWarp.

If you want to learn JavaScript, convert the Scratch blocks to close equivalents in JavaScript using Leopard.