Discuss Scratch
- Locness
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
UPDATE:
These instructions are out-of-date and not confirmed to work anymore. They are preserved below for reference and archive purposes.
It is recommended you use TurboWarp Packager instead.
==================================
Thanks to SpeedDesign for his original .exe tutorial. This is basically a macOS adapted version.
First, use https://sheeptester.github.io/words-go-here/scratch3-htmlifier/ to get a single HTML file for your project. (thanks to sheep_maker for this tool) Wait, it can be long.
When you've got the downloaded file, ensure it is named “project.html”.
Then, head over to https://nwjs.io and download the “normal” version, and extract the given file. You should get this folder in the Finder :

Right-click “nwjs” and select Open. This is required to make sure macOS will open it.
When a popup appears, select Open. You should see something similar to this :

Now, close this window.
Move your downloaded project.html to the nwjs's folder. Now, open TextEdit (or any other text editor) and create a “package.json” file (with .json as extension), still in the same folder, with this inside it :
If you're using TextEdit, make sure to go to Format > Convert to Text. If you get errors later that are related to this file (said “Manifest”), remove and manually put back the quotation marks.
Go back to your folder, and open a new window (File > New Finder Window).
Here, navigate to the same folder, and right-click “nwjs” and select “Show Package Contents”
Then navigate to Contents, then Resources. You should see this :

Go to File > New Folder, name your folder `app.nw` and open it.
Go back to your previous window, and drag-and drop the package.json and project.html files to the other window, in the “app.nw” folder (you can use the Cmd key to select both). Then you can close this window and go back to the first one.
Double-click “nwjs”. If everything has gone great, you should see your project working in its own window like this :

Now you can just rename nwjs to whatever you like, and that's it! You have your working app! You can put it in Applications, and you can do whatever you want with it.
NW.js requires you to share the “credits.html” file when you share your app.
Hope you liked this!
These instructions are out-of-date and not confirmed to work anymore. They are preserved below for reference and archive purposes.
It is recommended you use TurboWarp Packager instead.
==================================
Thanks to SpeedDesign for his original .exe tutorial. This is basically a macOS adapted version.
First, use https://sheeptester.github.io/words-go-here/scratch3-htmlifier/ to get a single HTML file for your project. (thanks to sheep_maker for this tool) Wait, it can be long.
When you've got the downloaded file, ensure it is named “project.html”.
Then, head over to https://nwjs.io and download the “normal” version, and extract the given file. You should get this folder in the Finder :

Right-click “nwjs” and select Open. This is required to make sure macOS will open it.
When a popup appears, select Open. You should see something similar to this :

Now, close this window.
Move your downloaded project.html to the nwjs's folder. Now, open TextEdit (or any other text editor) and create a “package.json” file (with .json as extension), still in the same folder, with this inside it :
{
"name": "Your app or game name",
"main": "project.html"
}
If you're using TextEdit, make sure to go to Format > Convert to Text. If you get errors later that are related to this file (said “Manifest”), remove and manually put back the quotation marks.
Go back to your folder, and open a new window (File > New Finder Window).
Here, navigate to the same folder, and right-click “nwjs” and select “Show Package Contents”
Then navigate to Contents, then Resources. You should see this :

Go to File > New Folder, name your folder `app.nw` and open it.
Go back to your previous window, and drag-and drop the package.json and project.html files to the other window, in the “app.nw” folder (you can use the Cmd key to select both). Then you can close this window and go back to the first one.
Double-click “nwjs”. If everything has gone great, you should see your project working in its own window like this :

Now you can just rename nwjs to whatever you like, and that's it! You have your working app! You can put it in Applications, and you can do whatever you want with it.
NW.js requires you to share the “credits.html” file when you share your app.
Hope you liked this!
Last edited by Locness (Sept. 10, 2022 16:25:00)
I don't do stuff on Scratch anymore, sorry

- Nambaseking01
-
1000+ posts
TUTORIAL : Convert sb3 to macOS .app
Interesting, but I don't use a Mac.
Hey there! My name is Nammy. I'm a male Forum Helper and Scratch Wiki Editor.
Profile | Test Account | Talk with me here! | Griffpatch is quitting Scratch?!
Profile | Test Account | Talk with me here! | Griffpatch is quitting Scratch?!
- --Explosion--
-
1000+ posts
TUTORIAL : Convert sb3 to macOS .app
Wow! Great guide! Thanks!
- herohamp
-
1000+ posts
TUTORIAL : Convert sb3 to macOS .app
Why are you using nwjs over good ol electron?
- Locness
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
Why are you using nwjs over good ol electron?
1. It's what was used in the windows tutorial.
2. Electron requires you to setup node and npm, and uses mostly command line, where most people aren't comfortable with it.
I don't do stuff on Scratch anymore, sorry

- Mobslyer92
-
22 posts
TUTORIAL : Convert sb3 to macOS .app
I think you should provide a tutorial to use electron for those interested because I, for one, and very comfortable using the command line.
Last edited by Mobslyer92 (April 20, 2020 12:42:46)
Hi, I'm Mobslyer92, check out my profile!
- R4356th
-
1000+ posts
TUTORIAL : Convert sb3 to macOS .app
Great guide! Thanks! Can .apps be produced Windows?
My browser / operating system: Windows NT 10.0, Chrome 81.0.4044.113, No Flash version detected
My browser / operating system: Windows NT 10.0, Chrome 81.0.4044.113, No Flash version detected
Q/A Regarding the Suggestions Category & Why Some Suggestions Got Rejected
List of Scratch Modifications And Other Block-Based Programming Languages
Useful Converters to Help You With Conversion
Workarounds for Blocks Scratch Does Not Have
Scratch Translator SDS Translator Scratch Wiki Editor(Test (English and Bengali)& English) Writer1000+ posts
The Scratch Movie Collaboration Thread Glitchy Scratch
- Maximouse
-
1000+ posts
TUTORIAL : Convert sb3 to macOS .app
Probably yes, because they are technically just folders. But make sure that you download the macOS version of nw.js. Can .apps be produced Windows?
- Locness
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
You mean can .apps can run on Windows? Well, no, because the nwjs binary in it is compiled for macOS. If you want your app to be cross-platform, you'll have to manage Windows and macOS version sperately. Look at the beginning of the tutorial for the link to the Windows version tutorial.
I don't do stuff on Scratch anymore, sorry

- Locness
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
Oh, @54356th you meant can you *make* these on Windows? Yes, you abosluetely can 

I don't do stuff on Scratch anymore, sorry

- pranavhaha
-
91 posts
TUTORIAL : Convert sb3 to macOS .app
use deskgap insted of nwjs it will save memory
Pranavhaha!
I like to make games and creative projects which help everyone
Some of my best games are here play it now!
grassland 360 platformer
Emoji clicker
- Locness
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
Oh, I didn't know about DeskGap, thanks a lot @pranavhaha! Although I use nwjs here as it doesn't require the use of any command line
Last edited by Locness (Oct. 20, 2020 05:27:42)
I don't do stuff on Scratch anymore, sorry

- wizardboy217
-
5 posts
TUTORIAL : Convert sb3 to macOS .app
hey locness, can you show an example of the code you put in? for example, i want to put scratchnapped by griffpatch. what will the json text look like?
- Locness
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
{
"name": "Scratchnapped",
"main": "project.html"
}

I don't do stuff on Scratch anymore, sorry

- DanielKRPS315
-
26 posts
TUTORIAL : Convert sb3 to macOS .app
Doesn't work I'm on: My browser / operating system: MacOS Macintosh 11.1, Safari 14.0.2, No Flash version detected
And it says Failed to load extension
I did the Json like This:
{
“name”: “Timer”,
“main”: “Timer v1.html”
}
I did the exact thing
And it says Failed to load extension
I did the Json like This:
{
“name”: “Timer”,
“main”: “Timer v1.html”
}
I did the exact thing
Last edited by DanielKRPS315 (Dec. 30, 2020 03:27:57)
- Locness
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
DanielKRPS315, what project are you trying to convert? Also, if you created the JSON with TextEdit, make sure to check the quotes; TextEdit tends to often mess up quotes. Try disabling its “smart quotes” feature - may be called otherwise, I didn't use macOS since a long time.
I don't do stuff on Scratch anymore, sorry

- qwertykid44
-
100+ posts
TUTORIAL : Convert sb3 to macOS .app
Interesting! I shall have to try this.
Qwertykid44: Currently transitioning.
I'm an INTP “Logician” personality with a passion for D&D. I'm largely retired in terms of attempting massive projects, but if you need something done, I do it or direct you to someone else who can do it.
Working on the DREAMCHILD collab.
Ace/Aroflux
She/Her
- dilanoe
-
17 posts
TUTORIAL : Convert sb3 to macOS .app
YAY NOW I CAN SELL MY GAMES!!!!!!!!!!! WO HOO!!!!!!!!!
when green flag click
Pay (10) bucks