DEV Community

Cover image for Deep Dive into CodeCast's Studio

Posted on

Deep Dive into CodeCast's Studio

We previously wrote about our Player in an earlier blog post, speaking about how it is the heart and soul of CodeCast. Following that analogy, our Studio is every other system in the body that keeps the heart pumping and alive. 

Without the Studio, there would be no Casts to watch. The Studio, available to download on Mac, Windows & Linux, is how the users create Casts. The goal of this blog post is to take a deep dive into the Studio to show you exactly how it works, and exactly why you should be using it to teach code.

Firstly, it’s free. That may sound like a gimmick or a catch, but currently, our entire community and software are entirely free to use. The goal of CodeCast is to allow people to teach code in a way that is intuitive, simple, and using software that does all the work for them. So let’s see how that works.

Creating An Account

Before you can get started with making your first ever Cast, you need to create an account. You can either use your email to sign up or you can authorize an account using your preexisting GitHub account.

You can do this either by signing up directly on the Studio or signing up on our website.

Studio Sign Up View

Note, you will be required to log in to the Studio and the website separately, as logging into one doesn’t automatically log you into the other.

The Studio View

Now that you’ve made an account (and logged in), we will begin to go over the Studio. This is the view you see now that you’re logged in:

Studio View

Project Folder

Clicking on Add another Project Folder allows you to add directories to your Cast. Anything inside the directory (with some limitations like node_modules) will be available to anyone watching your Cast. 

Add Project Folder

You are able to add multiple directories and you can add directories once a Cast is live.

Add folders while live

While the Cast is live, any edits you make within that directory will reflect live on the Player. This means that you can write new lines of code in any existing files on your local machine (in the code editor of your choice), or you can create new files, folders, etc. all within the directory you uploaded, and it will be available to your audience.

You’re also able to change the name of your directories within the studio by clicking on the pencil next to the uploaded directory.

Change folder name

Adding in any directories is encouraged, but completely optional.

Screen Sharing

You’re able to add media to your videos via screen sharing, or with your webcam. You can also choose individual windows.

Screen sharing

Just click Select a Screen Sharing to select which screen or window you want to share.

Select A Screen

You can deactivate a screen during a live Cast by hitting the green window button to the left of the screen name.

Deactivate a screen

You can also select which audio input you wish to include alongside your screen share. 

Casting Details

Casting Details

You can enter casting details here before starting the Cast, or after the Cast is finished. Casting details, including the cover, can be edited at any point after the Cast has ended by going to the Cast on the website and hitting edit, or editing it on the Player directly after the Cast has ended.

If you’re going to be sharing your Cast with people while it’s live, it’s highly recommended that you fill this out before casting. It can also be altered in the middle of a live Cast.


Permissions by default will publish the Cast to your personal account with private access. Remember to change this to public if you’re doing a live Cast that you want others to view. 


Permissions can be changed in the middle of a live Cast, or anytime after the Cast is published.

If you belong to an organization, making the Cast private will still make it accessible to anyone else that is part of the organization, but not the general public. This is a great way for people to communicate with Casts across workplaces!

Live View

When you’re reading to start a Cast, hit the big green ‘Start Streaming” button and a countdown will appear like so:

Live view gif

Once the countdown is finished, it will then look like this:

Live Studio View

It shows you that it’s live, gives you a live view count of people currently watching, as well as showcases the length that the Cast has been on for. 

Below that you can access the Cast URL by clicking the copy button directly to the right of the URL, or clicking on the new window button to open the Player. If you’re doing a live Cast, it is recommended that you keep the Player open to keep up with the chat!

Cast Url

Cast Ended

Once you’re done with the Cast, hit “End Streaming”. You’ll then see a summary of the Cast, including length. You’re also given the URL to access the recorded version of the Cast.

Cast Ended Studio View

It’s important to note that it does take some time for any media to upload, so you’ll see a “preparing media” banner on the Player when opening the Cast right away after ending it. This will go away once the media has finished being uploaded.

All in all, the Studio is an incredibly useful tool that combines both live streaming media and code, making it a stand-out product in the development world.

Prefer a video tutorial? Watch the video below for a follow-along tutorial!‍

Top comments (0)