Hey everyone! It's been a while since I uploaded this video (and any video in general haha) but in the meantime CodeSandbox has changed. It's still possible to use it in your workflow for custom code in Webflow, but you'll have to pay a bit now. I'm planning to make a new video about it, but for anyone looking for a free option, I heard good things about Slater App!!
Actually it works even with an updated version. I just used the Devbox instead of Sandbox, left the basic html, css, js, json stuff and get rid of everything else. Since the Free plan features the "Unlimited Devboxes", as opposed to only 5 "'Sandboxes", this works pretty well. I think you should check this out. And thanks for the work you're making, its awesome.
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
Hi Ilja, thanks for the video, i have encountered a slightly different layout in the codesandbox, i couldn't find a template from github, I could only find files from codesandbox itself, so when I create a "script.js" file, i got a react icon for the file, instead of the typical yellow js background icon? I dont know what I have done wrong, do you know how i could solve this issue?
Ha cool, I also did a (German) tutorial about this a few days ago :) One question about your workflow. Do you use the sandbox for your live sites or do you copy/paste some of your code into webflow when you publish the site? For example, for better performance or faster loading speed, because the CodeSandbox link sometimes takes a little longer than the webflow site.
Ahh cool! Thanks for commenting here, hadn't seen your channel before. I only use csb during production, and move everything to Webflow afterwards indeed!
Seems like this no longer works for me... Codesandbox changed their plans and now all sandbox drafts are private. Not sure if that's the reason but now the script.js can't be reached? Not sure but it's a CORB issue? :(
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
Awesome content again! One question. Are you using it also for the CSS or only for JS. I am at the end of my project and I have some CSS on the Site settings, I have some that I use only for specific pages, so it is on the page settings code. Also I have one global embedded where I write code that I want to see in the builder, but it is in the global where are the nav, page loader etc... And this makes me crazy. I will be super thankful if you give me some tips from your side?
I've used it for CSS as well! But I never keep my code in csb, it's only there during production. Afterwards I have a similar setup to you in terms of distributing the code, I think it's the most correct way!
Great tutorial! I have a question though! When everything is complete and you are ready to launch the site. Do you still keep all the JS code in a sandbox or do you move it somewhere else? And if you move it could you share a tutorial on where and how to store it for published sites? Would be greatly appreciated:)
You can't link a tag inside of another JS file, and the CodeSandbox environment (when you make a script.js file for example) is exactly that, a Javascript file.
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
There's a lot of different use cases for JS. There's frameworks to build with, libraries to animate with, and so so much more. I'd suggest to chose a topic you would like to focus on, and always start with the basics of vanilla JS. Then, check out if there are some really good courses or YT channels on the topic and just practice a lot!
If you want to add some structure to your learning, I suggest asking ChatGPT to give you a challenge for each day. It is easy to adapt to your needs in this case.
Thank you so much for the precise tuts as always but I have one question. How can someone mess around with custom codes without byuing webflow service plan. I'm in my learning stage and the webflow pricing is way too high and I don't want to invest in it yet.
Most of the times I just copy the code from Codesandbox, and paste it into the custom code fields in Webflow. You could also upload it to a GitHub repo, and link that through jsDelivr
hI Thanks for your content. Can you make an video with user case who people who dont know how use GSAP with codesandbox on webflow and test it please. I dont understand all in your video
You don't have to do anything manually in Webflow. All HTML and CSS is handled visually, have you tried it? Its super intuitive if you have knowledge of it already. Any custom CSS or JS is optional!
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
Yes, he's working on MacOS, but that should not influence look or behaviour of the Codesandbox web app as it's separate from the OS. Codesandbox just got a few updates since the video has been uploaded and now button for creating new file is at the directory name as "New file" icon. (Paper with a plus symbol).
Does anyone know why "Cross-Origin Read Blocking (CORB) blocked a cross-origin response." Is a consistent error I get when following this workflow? Thanks in advance!
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
What's the part that doesn't work? Make sure you follow closely step by step and make sure you copy the right link from CodeSandbox and then also add the right file name behind the URL between the tags!
![[ 2024 update ] Custom code in Webflow - CodeSandbox guide](http://i.ytimg.com/vi/vPpr6XcAeoU/mqdefault.jpg)
![[ 2024 update ] Custom code in Webflow – CodeSandbox guide](/img/tr.png)
![The ULTIMATE SwiperJS Guide [2024 Webflow]](/img/n.gif)
Hey! It's me again. Finally hit the publish button on a new video - an updated guide on how to setup Codesandbox. Check out my channel for it!
Hey everyone! It's been a while since I uploaded this video (and any video in general haha) but in the meantime CodeSandbox has changed. It's still possible to use it in your workflow for custom code in Webflow, but you'll have to pay a bit now. I'm planning to make a new video about it, but for anyone looking for a free option, I heard good things about Slater App!!
Actually it works even with an updated version. I just used the Devbox instead of Sandbox, left the basic html, css, js, json stuff and get rid of everything else. Since the Free plan features the "Unlimited Devboxes", as opposed to only 5 "'Sandboxes", this works pretty well. I think you should check this out. And thanks for the work you're making, its awesome.
Doing the Lord’s work right here. Thank you so much man. Ive always wondered what Code Sand Box was from Tim’s videos. Now i know!
so simple and informative, thanks for the help brother
i don't see "Quick start -> static (github)" in codesandbox. How do you do?
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
Hi Ilja, thanks for the video, i have encountered a slightly different layout in the codesandbox, i couldn't find a template from github, I could only find files from codesandbox itself, so when I create a "script.js" file, i got a react icon for the file, instead of the typical yellow js background icon? I dont know what I have done wrong, do you know how i could solve this issue?
I am also struggling with this!
I'm struggling with it too, and the test code doesn't work on my side
I face the same issue. If anyone found a solution, please let us know
Same here..
Check my reply for Ilja pinned Message. Works pretty fine. JS has its icon. And the alert and console messages work pretty fine too.
I appreciate you taking the time to make this video. Thank you.
You're amazing at explaining Ilja! Looking forward to seeing your next tutorials :D Keep them coming! Soooo good!
Amazing and helpful quick tutorial. Thanks!
Can't wait for more tutorials! :D
Ha cool, I also did a (German) tutorial about this a few days ago :) One question about your workflow. Do you use the sandbox for your live sites or do you copy/paste some of your code into webflow when you publish the site? For example, for better performance or faster loading speed, because the CodeSandbox link sometimes takes a little longer than the webflow site.
Ahh cool! Thanks for commenting here, hadn't seen your channel before. I only use csb during production, and move everything to Webflow afterwards indeed!
@@iljavaneck Thank you for your answer and the insight! :)
@@iljavaneck Hi !
Once you finished production, you copy all the code from Sandbox, but where do you exactly paste it ? :)
thanks
Seems like this no longer works for me... Codesandbox changed their plans and now all sandbox drafts are private. Not sure if that's the reason but now the script.js can't be reached? Not sure but it's a CORB issue? :(
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
Thanks! awesome, I used to have constant problems due to the fact that webflow has limitations in the amount of code! thanks a lot
Awesome content again! One question. Are you using it also for the CSS or only for JS. I am at the end of my project and I have some CSS on the Site settings, I have some that I use only for specific pages, so it is on the page settings code. Also I have one global embedded where I write code that I want to see in the builder, but it is in the global where are the nav, page loader etc... And this makes me crazy. I will be super thankful if you give me some tips from your side?
I've used it for CSS as well! But I never keep my code in csb, it's only there during production. Afterwards I have a similar setup to you in terms of distributing the code, I think it's the most correct way!
Great tutorial! I have a question though! When everything is complete and you are ready to launch the site. Do you still keep all the JS code in a sandbox or do you move it somewhere else? And if you move it could you share a tutorial on where and how to store it for published sites? Would be greatly appreciated:)
Would you recommend hosting the code separately instead of pasting it directly into Webflow. For better code management and less clutter?
Useful video, thanks man! For example, if you're working on GSAP specifically, why wouldn't you add the CDN link from gsap inside your code sandbox?
You can't link a tag inside of another JS file, and the CodeSandbox environment (when you make a script.js file for example) is exactly that, a Javascript file.
Hey Ilja, What is the best way to learn gsap? And have a good feeling for animations?
My codesandbox UI is different. I can't save, nor can i run the code? any reason as to why, and which version are you using?
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
Think you Ilja for this presentation video. I have a question for you: What is the best way to learn Java Script quickly (3 or 6 months)?
There's a lot of different use cases for JS. There's frameworks to build with, libraries to animate with, and so so much more. I'd suggest to chose a topic you would like to focus on, and always start with the basics of vanilla JS. Then, check out if there are some really good courses or YT channels on the topic and just practice a lot!
If you want to add some structure to your learning, I suggest asking ChatGPT to give you a challenge for each day. It is easy to adapt to your needs in this case.
What browser are you using and is it available for windows
Thank you so much for the precise tuts as always but I have one question. How can someone mess around with custom codes without byuing webflow service plan. I'm in my learning stage and the webflow pricing is way too high and I don't want to invest in it yet.
Once your client's project is finished, where do you keep this code so that the client can continue to see the animation displayed on their site?
Most of the times I just copy the code from Codesandbox, and paste it into the custom code fields in Webflow. You could also upload it to a GitHub repo, and link that through jsDelivr
Legend❤ dankjewel !
hI Thanks for your content. Can you make an video with user case who people who dont know how use GSAP with codesandbox on webflow and test it please. I dont understand all in your video
@llja can we use it in production
Why should I even use webflow instead of hosting a website writen in html/css/js since i have to do everything manualyl anyway even on webflow
You don't have to do anything manually in Webflow. All HTML and CSS is handled visually, have you tried it? Its super intuitive if you have knowledge of it already. Any custom CSS or JS is optional!
Hi! Which browser do you use? Thanks for all tutorials!🎉
It's Arc! Glad you like the vids :)
Do you do this for production code too?
Bro, Do a series where you explain how a no code webflower can use code in webflow and edit it
whats the slide out drawer you keep using on ur desktop?
Thank you!
is it me or it doesn't work anymore ? I have the error msg "File 'package.json' is not exist at this page", and there is no more "static" template :/
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
what is the brawser you use?
Thanks brother 🙏
There is no Quick Start tab where you show it at 1:04
Are you working on the iOS system? My Sandbox looks very different and can't create JS file
Yes, he's working on MacOS, but that should not influence look or behaviour of the Codesandbox web app as it's separate from the OS. Codesandbox just got a few updates since the video has been uploaded and now button for creating new file is at the directory name as "New file" icon. (Paper with a plus symbol).
love your content btw!!!
Thank you
Does anyone know why "Cross-Origin Read Blocking (CORB) blocked a cross-origin response." Is a consistent error I get when following this workflow? Thanks in advance!
Hey there! Shortly after this video was published, CodeSandbox was updated. I finally published a new video today on how to set up - you can find it on my channel. Hope it helps! :)
Hey! I actually can't find the panel that you see at 00:51
Do you maybe have a solution for that?
same here, i can't create a js file, it automatically create a react file (look like jsx)
same here.. i'm not sure if the "static" is not an option any more or if i'm missing something..
Thanks man
damn, That's genius!!
Thak you king
do use sidekick as brawser?
It's Arc!
tried it out, and it doesn't work :\
What's the part that doesn't work? Make sure you follow closely step by step and make sure you copy the right link from CodeSandbox and then also add the right file name behind the URL between the tags!
It no longer works
It does still work, you need to make sure your code is public tho. That's what changed
Thank you!!