Project HTMLifier

Download offline version (An HTML file that can be opened and used in the browser without an internet connection)

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. There is no direct translation between a Scratch block and a JavaScript equivalent because the two languages are fundamentally different, so you should not use the code in the generated file for learning HTML or JavaScript after Scratch.

The project will automatically start, and there are no green flag or stop sign buttons.

Project ID: (the ID of the project on the Scratch website)

Upload project file:

Options

Project name: (the text displayed in the browser tab)

Username value: (the value that the username block reports)

Show fullscreen button?

Enable turbo mode?

Load progress indicator?

Loading image:

Enable compatibility mode?²

Stretch the canvas to fit (as opposed to maintaining the aspect ratio)?

Hide cursor?

Lock the pointer on click? The mouse x/y blocks will report the mouse movement.³

Output a .zip file? The .zip file will contain an index.html file and separate files for the project's assets.

Monitor style

Use custom variable/list monitor colour: ? (If unchecked, a translucent black will be used.)

Monitor text colour:

Hide the monitor background boxes?

Cloud variable source

Save cloud variables locally using localStorage¹

Use a custom server:

Give certain cloud variables special behaviours depending on the name?⁴

E羊icques (modded) options

Does this project use a custom size? Width: Height:

Load unofficial extension from URL:

Remove limits such as clone and list length limits?

HTMLify Download automatically?

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.

¹You may have to deal with privacy laws around cookies outside of Scratch.

²Compatibility mode forces projects to run at 30 FPS, like in Scratch 2.0. Turning this off allows the project to run at a higher framerate (usually 60 FPS, depending on the computer screen's refresh rate).

³I think the implementation of this is poor. Maybe instead of setting mouse x/y, it can set a cloud variable with a certain name. You can leave feedback and suggestions on my profile.

⁴If a cloud variable with the name "☁ eval" is set, it'll run the variable value as JavaScript and store it in a cloud variable named "☁ eval output"; if there is an error, it'll be stored in "☁ eval error." If you're using a custom cloud server, then cloud variables whose names start with "☁ local storage" will store their values in localStorage instead of in the server.

Update history

See the code and previous versions on Github.

2020-06-13

• 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

• 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

• Support for custom extensions from a URL
• CSS by Mr. Cringe Kid

2020-03-29

• 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

Made by Sheep_maker, who used scratch-vm, download.js, and their dependencies for this project.

CSS by Mr. Cringe Kid.