Hi guys!

Just wondering if it's possible to implement the Scratch editor into my website, and let the website interact with it? (e.g. when a button is clicked on the website, it will insert a block into the Scratch editor)

Basically, I just want my website to interact with the Scratch editor, either by modifying what's happening in the editor, and showing that I can put stuff into the editor, and get stuff out of it through the website.

Main problem: If I embed the Scratch website into my website, then it's only a sandbox, and you can' really interact with it at all.

Cheers!!

Yes, it's possible. Do you need just the blocks or the whole editor?

Hi Maximouse,

I need the whole editor. So basically, I just want my website to interact with this Scratch editor.
I want my website to talk to the Scratch editor so that my website can basically modify what’s happening inside the editor.

At the moment Scratch does not have any API to let me do this

Could you please point me to the right direction on how I would go about doing this?
I would greatly appreaciate it!!

Thanks!

The website I am implementing the Scratch editor with is called: https://csunplugged.org/
This website contains a feature called, “Plugging It In” (https://csunplugged.org/en/plugging-it-in/) which basically contains a list of programming challenges for kids to do in Python & Scratch languages.

If you go to one of the Python programming challenges (https://csunplugged.org/en/plugging-it-in/binary-numbers/how-binary-digits-work/binary-numbers-no-calculations/) you will see a text editor where you can type Python code to solve the programming challenges.
But for Scratch programming challenges there is no editor currently implemented.
Therefore, what I'm trying to do is similar to the Python programming challenge page, but do it for Scratch. So implement parts of the Scratch editor into this website.

dev_chi wrote:

The website I am implementing the Scratch editor with is called: https://csunplugged.org/
This website contains a feature called, “Plugging It In” (https://csunplugged.org/en/plugging-it-in/) which basically contains a list of programming challenges for kids to do in Python & Scratch languages.

If you go to one of the Python programming challenges (https://csunplugged.org/en/plugging-it-in/binary-numbers/how-binary-digits-work/binary-numbers-no-calculations/) you will see a text editor where you can type Python code to solve the programming challenges.
But for Scratch programming challenges there is no editor currently implemented.
Therefore, what I'm trying to do is similar to the Python programming challenge page, but do it for Scratch. So implement parts of the Scratch editor into this website.

Are we talking embedding the site to code in?
In that case, just create a blank project, share it, the go below the N&C and choose the button shown here. Then, (while on that project) press space. You should see a picture of a box. Do those steps on a project (clicked ‘copy embed’) and then go to your website, find where you can paste an embed code; press ctrl + v (cmd + v on a mac) and click OK or something of the sort. When you preview the website you should be able to see inside the project and code from the web. I may be wrong, though.

han614698 wrote:

Are we talking embedding the site to code in?
In that case, just create a blank project, share it, the go below the N&C and choose the button shown here. Then, (while on that project) press space. You should see a picture of a box. Do those steps on a project (clicked ‘copy embed’) and then go to your website, find where you can paste an embed code; press ctrl + v (cmd + v on a mac) and click OK or something of the sort. When you preview the website you should be able to see inside the project and code from the web. I may be wrong, though.

This does not work: embedded projects don't have a see inside button.

The Scratch editor is available as a package on npm which provides a React component that can be embedded on another website.

Maximouse wrote:

han614698 wrote:

Are we talking embedding the site to code in?
In that case, just create a blank project, share it, the go below the N&C and choose the button shown here. Then, (while on that project) press space. You should see a picture of a box. Do those steps on a project (clicked ‘copy embed’) and then go to your website, find where you can paste an embed code; press ctrl + v (cmd + v on a mac) and click OK or something of the sort. When you preview the website you should be able to see inside the project and code from the web. I may be wrong, though.

This does not work: embedded projects don't have a see inside button.

The Scratch editor is available as a package on npm which provides a React component that can be embedded on another website.

So I have installed the scratch-gui package (from the link you gave) through npm in my react web application.
I'm just kind of confused how I would use this package to display the Scratch editor in my website now…

Cheers

han614698 wrote:

Are we talking embedding the site to code in?
In that case, just create a blank project, share it, the go below the N&C and choose the button shown here. Then, (while on that project) press space. You should see a picture of a box. Do those steps on a project (clicked ‘copy embed’) and then go to your website, find where you can paste an embed code; press ctrl + v (cmd + v on a mac) and click OK or something of the sort. When you preview the website you should be able to see inside the project and code from the web. I may be wrong, though.

Yes so I want the Scratch editor to be inside the website, so that when kids answer the Scratch programming challenges in this website:
(https://csunplugged.org/en/plugging-it-in/)
They won't have to open the Scratch application on another window to do the programming challenges, since the Scratch editor would already be within this website.

But as a starting basis for my project, I just want to simply be able to load the Scratch editor in a prototype website that I will create, and demonstrate to my project supervisor this prototype website can interact with the Scratch editor (e.g. clicking a button on the website will insert a block into the Scratch editor)

Would an iframe work?

gosoccerboy5 wrote:

Would an iframe work?

No, as clarified before:

dev_chi wrote:

Main problem: If I embed the Scratch website into my website, then it's only a sandbox, and you can' really interact with it at all.

I also want to know how to implement the Scratch editor into a website…Does anyone know how to do it?

inalee wrote:

I also want to know how to implement the Scratch editor into a website…Does anyone know how to do it?

I am pretty sure you can implement it by installing scratch-gui as a React Component, like scratch-www (the partial 3.0 site)

Maximouse wrote:

(#10)

gosoccerboy5 wrote:

Would an iframe work?

No, as clarified before:

dev_chi wrote:

Main problem: If I embed the Scratch website into my website, then it's only a sandbox, and you can' really interact with it at all.

It would probably work with a fork and a way to listen to and send events from the page for seeing inside and things.

CST1229 wrote:

It would probably work with a fork and a way to listen to and send events from the page for seeing inside and things.

Btw, the project page is part of scratch-www not scratch-gui (so there would be no “see inside”).

dev_chi wrote:

han614698 wrote:

Are we talking embedding the site to code in?
In that case, just create a blank project, share it, the go below the N&C and choose the button shown here. Then, (while on that project) press space. You should see a picture of a box. Do those steps on a project (clicked ‘copy embed’) and then go to your website, find where you can paste an embed code; press ctrl + v (cmd + v on a mac) and click OK or something of the sort. When you preview the website you should be able to see inside the project and code from the web. I may be wrong, though.

Yes so I want the Scratch editor to be inside the website, so that when kids answer the Scratch programming challenges in this website:
(https://csunplugged.org/en/plugging-it-in/)
They won't have to open the Scratch application on another window to do the programming challenges, since the Scratch editor would already be within this website.

But as a starting basis for my project, I just want to simply be able to load the Scratch editor in a prototype website that I will create, and demonstrate to my project supervisor this prototype website can interact with the Scratch editor (e.g. clicking a button on the website will insert a block into the Scratch editor)

What loader are you using? Webpack + Babel?
If so, make sure Webpack config is set so Babel is run on the node_modules directory for scratch-www so the JSX gets compiled. If you are not already using React, it will be tough to add to your website and you're better off using a completely different build system to build the one page for the editor then put it in an iframe and communicate with the main site using window.postMessage.

Google CS First seems to have a custom build of scratch-gui in their website, check that out?

(edited to mention iframes)

From the looks of it, the website is bundled into a file and using jQuery. It's probably not React

Hi @dev_chi, I'm trying to accomplish exactly what you did - it seems you figured it out. How were you able to add the editor into your site?

dev_chi wrote:

Hi guys!

Just wondering if it's possible to implement the Scratch editor into my website, and let the website interact with it? (e.g. when a button is clicked on the website, it will insert a block into the Scratch editor)

Basically, I just want my website to interact with the Scratch editor, either by modifying what's happening in the editor, and showing that I can put stuff into the editor, and get stuff out of it through the website.

Main problem: If I embed the Scratch website into my website, then it's only a sandbox, and you can' really interact with it at all.

Cheers!!

tridg070150 wrote:

Hi @dev_chi, I'm trying to accomplish exactly what you did - it seems you figured it out. How were you able to add the editor into your site?

dev_chi wrote:

Hi guys!

Just wondering if it's possible to implement the Scratch editor into my website, and let the website interact with it? (e.g. when a button is clicked on the website, it will insert a block into the Scratch editor)

Basically, I just want my website to interact with the Scratch editor, either by modifying what's happening in the editor, and showing that I can put stuff into the editor, and get stuff out of it through the website.

Main problem: If I embed the Scratch website into my website, then it's only a sandbox, and you can' really interact with it at all.

Cheers!!

Read through the posts - it should help. Also note that this is a year-old thread.

I'm a website maker

<iframe src="https://scratch.mit.edu/editor/embed" />

Doesn't work