htmlifier - GitLite

KO | EN

gitlite — search

#javascript #hacktoberfest #react #llm #rust #linux #nodejs #java #cli #awesome-list #vue #security #openai #open-source

htmlifier

(★ 176)

The HTMLifier "converts" Scratch 3.0 projects to an HTML file by putting all the project data and the entire Scratch engine into one enormous file

File Explorer

Download Latest Version (.zip)

- settings.json
- build.ts
- - Checkbox.ts
  - Field.ts
  - Fieldset.ts
  - File.ts
  - Footnote.ts
  - FootnoteList.ts
  - HtmlifyBtn.ts
  - Log.ts
  - Offlineifier.ts
  - Options.ts
  - RadioGroup.ts
  - UrlOrFileList.ts
- - footnotes.ts
  - options.ts
- - react-dom.ts
  - react.ts
- App.ts
- htmlify.ts
- index.ts
- offlineify.ts
- options.ts
- utils.ts
- .gitignore
- index.min.js
- package.json
- README.md
- test.js
- - template.css
  - template.html
  - template.js
- dependencies.ts
- ensure-ok.ts
- escape.ts
- get-data-url.ts
- get-file-extension.ts
- get-project.ts
- htmlifier.ts
.gitignore
htmlify-mod.md
import-map.json
index.bundle.min.js
index.html
LICENSE
main.css
README.md
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/SheepTester/htmlifier

Downloads the entire project code from GitHub to your computer.

cd htmlifier

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

cd node

This project's files live in a subfolder, so move into it first.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# htmlifier

The HTMLifier "converts" Scratch 3.0 projects to an HTML file by putting all the
project data and the entire Scratch engine into one enormous file.

It does this by making Scratch VM fetch a project, and in doing so, it tracks
the assets it fetches from the project.json. It converts the fetched assets and
project.json into a base64 data URI. It also fetches the code for the Scratch
VM. It inserts all this in a template HTML file, which has been set up to load
the project from the base64 data URIs and do other things that the Scratch VM
doesn't take of, which is normally handled by
[scratch-gui](https://github.com/LLK/scratch-gui/), such as variable/list
monitors and ask and wait prompts.

The HTMLifier is also available as an [npm
package](https://www.npmjs.com/package/@sheeptester/htmlifier).

## Credits

CSS by [Mr. Cringe Kid](https://scratch.mit.edu/users/mrcringekidyt/).

The Scratch engine is from [scratch-vm](https://github.com/LLK/scratch-vm/).

[JSZip](https://stuk.github.io/jszip/) for downloading as a zip.

## See also

The Scratch mod used by the HTMLifier: [E羊icques](https://sheeptester.github.io/scratch-gui/)
([Github](https://github.com/SheepTester/scratch-gui)).

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.

Scratch to JavaScript compilers (best for speed):
[Phosphorus](https://phosphorus.github.io/) (Scratch 2.0),
[Forkphorus](https://forkphorus.github.io/) (3.0), and
[TurboWarp](https://turbowarp.org/) (3.0).

Scratch to JavaScript converter (best for learning JavaScript):
[Leopard](https://leopardjs.now.sh/)

## Development

If modifying the files in src/, you'll have to re-bundle everything.

```sh
# Build once
deno run --allow-run --allow-read=src --allow-write=index.bundle.min.js \
  --allow-net=sheeptester.github.io bin/build.ts

# Automatically build when the files change (for development)
nodemon --exec "deno run --allow-all" --watch src --watch client \
  --ext ts,css,html,js bin/build.ts -- dev

# Build for Node
deno run --allow-run --allow-read=src --allow-write=node/index.min.js \
  --allow-net=sheeptester.github.io bin/build.ts node
```