Custom code in Webflow - CodeSandbox guide

[ Links 👇 ]
Codesandbox: codesandbox.io/
GSAP: greensock.com/docs/v3/Install...
How I record my screen: www.screen.studio/
[ Do you speak Dutch? 🇳🇱 🇧🇪 ]
Join the largest and most vibrant no-code community!
www.nocodecommunity.nl/
[ My socials ✌️ ]
Twitter: / iljavaneck
Instagram: / by.ilja
Awwwards: www.awwwards.com/ilja-van-eck/
Webflow profile: webflow.com/@iljavaneck

[@iljavaneck]

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!

[@iljavaneck]

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!!

[@AndrewSavsunenko]

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.

[@jgustafe]

I appreciate you taking the time to make this video. Thank you.

[@eli.alcaraz]

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!

[@therodpassos]

Amazing and helpful quick tutorial. Thanks!

[@geoffdawes6529]

You're amazing at explaining Ilja! Looking forward to seeing your next tutorials :D Keep them coming! Soooo good!

[@LenaHo]

Can't wait for more tutorials! :D

[@brammeeuwissen8579]

love your content btw!!!

[@user-ho7yw3rc7n]

Thanks! awesome, I used to have constant problems due to the fact that webflow has limitations in the amount of code! thanks a lot

[@BigheadSinan]

Legend❤ dankjewel !

[@Ray-Bolden-]

Thank you!!

[@aidansinclair3377]

Thank you!

[@Itslogicee]

Thanks brother 🙏

[@muktadirrudro7552]

Thanks man

[@benvindadossantos2092]

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?

[@zoegatti857]

I am also struggling with this!

[@haca.studio]

I'm struggling with it too, and the test code doesn't work on my side

[@ProGaming-gf3pr]

I face the same issue. If anyone found a solution, please let us know

[@wisssse]

Same here..

[@AndrewSavsunenko]

Check my reply for Ilja pinned Message. Works pretty fine. JS has its icon. And the alert and console messages work pretty fine too.

[@yadreyy]

Thank you

[@user-mr8ng9er1k]

damn, That's genius!!

[@tahieu7874]

i don't see "Quick start -> static (github)" in codesandbox. How do you do?

[@iljavaneck]

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! :)

[@user-me4wd4ut4y]

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:)

[@whellintonrocha8734]

Thak you king

[@mertma52]

Hey Ilja, What is the best way to learn gsap? And have a good feeling for animations?

[@goldenant9450]

whats the slide out drawer you keep using on ur desktop?

[@valerikarageorgiev1711]

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?

[@iljavaneck]

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!

[@htooaungglwinn]

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.

[@Diego_Cabrera]

Would you recommend hosting the code separately instead of pasting it directly into Webflow. For better code management and less clutter?

[@FloNocode]

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

[@kvncnls]

Do you do this for production code too?

[@brammeeuwissen8579]

what is the brawser you use?

[@j.espinosa]

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?

[@iljavaneck]

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.

[@user-hg9qy6ny2p]

@llja can we use it in production

[@dirklach]

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.

[@iljavaneck]

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!

[@dirklach]

@@iljavaneck Thank you for your answer and the insight! :)

[@user-uo9ux6qi5b]

@@iljavaneck Hi ! Once you finished production, you copy all the code from Sandbox, but where do you exactly paste it ? :) thanks

[@TheAhmedGhorab]

Bro, Do a series where you explain how a no code webflower can use code in webflow and edit it

[@zdepodany]

There is no Quick Start tab where you show it at 1:04

[@adolfosmrr]

Hi! Which browser do you use? Thanks for all tutorials!🎉

[@iljavaneck]

It's Arc! Glad you like the vids :)

[@vincentorougoura3901]

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)?

[@iljavaneck]

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!

[@EmilyMarais]

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.

[@emeriterusty7527]

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?

[@iljavaneck]

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

[@test_solutions]

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? :(

[@iljavaneck]

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! :)

[@coralineoscar546]

Are you working on the iOS system? My Sandbox looks very different and can't create JS file

[@zdepodany]

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).

[@brammeeuwissen8579]

do use sidekick as brawser?

[@iljavaneck]

It's Arc!

[@user-lu7ui1mn4f]

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!

[@iljavaneck]

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! :)

[@INXIETE]

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?

[@iljavaneck]

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! :)

[@emanuelepesa578]

Hey! I actually can't find the panel that you see at 00:51 Do you maybe have a solution for that?

[@mayerzrl]

same here, i can't create a js file, it automatically create a react file (look like jsx)

[@kaskie42]

same here.. i'm not sure if the "static" is not an option any more or if i'm missing something..

[@hb8527]

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 :/

[@iljavaneck]

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! :)

[@jinzo664]

tried it out, and it doesn't work :\

[@iljavaneck]

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!

[@johanvanwambeke723]

It no longer works

[@johanvanwambeke723]

It does still work, you need to make sure your code is public tho. That's what changed

[@subsqwibe5433]

What browser are you using and is it available for windows