Improve Your Presentation Skills by Scripting Your Live Coding Demos to Perfection

This ad is not shown to multipass and full ticket holders
React Summit US
React Summit US 2025
November 18 - 21, 2025
New York, US & Online
The biggest React conference in the US
Learn More
In partnership with Focus Reactive
Upcoming event
React Summit US 2025
React Summit US 2025
November 18 - 21, 2025. New York, US & Online
Learn more
Bookmark
Rate this content

Join Elio for a talk on mastering live coding demos. Learn to script your demos for seamless, error-free execution using Visual Studio Code and the Demo Time extension. Ideal for anyone performing live coding at conferences, webinars, or team meetings, this session will help transform your presentations from stressful to impressive.

This talk has been presented at React Summit 2025, check out the latest edition of this React Conference.

FAQ

To reduce distractions during a live coding presentation, turn off notifications, close unnecessary applications, avoid using too many tabs, and minimize context switching. Ensure your code editor's font is large enough, use a block cursor instead of a blinking line, and turn off hover panels.

Preparation is crucial for live coding sessions to ensure smooth delivery and minimize distractions. This includes setting up your environment with the right themes, font sizes, and cursor settings, as well as scripting your demo to follow a structured flow.

Demo Time is a tool designed for giving presentations within Visual Studio Code by scripting demos. It helps eliminate the possibility of things going wrong by following a pre-scripted flow, similar to slides in PowerPoint or Keynote, thus reducing stress and context switching.

To install Demo Time, open Visual Studio Code, go to the extension view, search for Demo Time, and click the Install button. After installation, you can initialize it to create a demo.json file for scripting your demo actions.

Slides in Demo Time can be used to explain concepts or show architecture during coding presentations. They are created using Markdown and provide a seamless way to integrate explanatory content without disrupting the flow of the live demo.

Demo Time enhances audience engagement by providing a clear and structured presentation flow, reducing distractions, and allowing for scripted interactions. This helps the audience follow along without getting lost in context switches or technical issues.

Before a live coding demo, configure your IDE with a light theme, increase font size, use a block cursor, and ensure hover panels are turned off. These adjustments make the presentation clearer and easier for the audience to follow.

For more information about Demo Time, you can check the documentation at demotime.elio.dev.

Demo Time improves presentation flow by allowing scripted sequences of actions within Visual Studio Code, such as opening files, creating files, highlighting code, and running commands. This eliminates the need for external tools and reduces context switching.

Elio Struyf
Elio Struyf
8 min
17 Jun, 2025

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Elio's tips for perfect live coding: Minimize distractions, prepare well with light themes and larger fonts, adjust cursor style, avoid hover panels. Stay focused on one application during presentations. Changing settings for clarity, stressing the importance of tools like Demo Time for scripted presentations within Visual Studio Code, eliminating context switching between applications, and facilitating audience interaction with shared repositories. Exploring actions in Demo Time: creating code, opening files, highlighting code, and executing VS Code commands for a cleaner presentation. Utilizing Slides for Markdown presentations within Demo Time.

1. Improving Presentation Skills

Short description:

Elio's tips for perfect live coding: Minimize distractions, prepare well with light themes and larger fonts, adjust cursor style, avoid hover panels. Stay focused on one application during presentations.

Hi, I'm Elio and welcome to the session about how you can improve your presentation skills by scripting your live coding demos to perfection. We've all been to sessions where the speaker had to present their slides and then moving over to their IDE to show some code and to start writing and then things go wrong. For instance, if I'm already going to my IDE and having too many windows open, it creates distraction for my audience in order to see, hey, to which is he going to move. So probably I click on this one and then, oh no, accidentally I did it wrong. It needs to be my code editor. And then in my code editor, I need to ask the question, hey, is my font all right? Is it big enough? And start typing and starting to write mistakes. And these can all distract you, but also your audience.

So whenever you're going to do a live coding or presentation in general, you need to make sure that there's not too many distractions, like the notifications have to be turned off. Close down all your applications, only the ones that you need. Keep them open. Tabs. Don't use too many tabs. And context switching is really a big hassle for you to stay in the flow, but also for your audience, because you're going to lose track to which application they have to focus on.

One of those things, whenever you're going to do a coding session, it comes with preparation. And the first thing to prepare for is whenever you show codes, it should be best done with a light in. We already know that, but still, I see people not using it. So try to use a light team and set already your fonts to a bigger font size. What you can also do is change the cursor style. By default, it's a very tiny line in your editor. And it's better to use a block, because the block is more visual and it's easier to spot. And you can also do the expanding animation instead of the blinking. You can change your color. And then the last thing is hover panels. If you're going to show code and you move over to some variable, it can happen that there's a hover panel. That's also a distraction, but also for the audience, it's like, why is it there? And for you, it's like, hey, go away. I don't need you. You can turn these off. And these are very useful settings whenever you're going to do a presentation to just set them up front. So going back to my code, this is how my code looks like. And most probably, you don't see my cursor, because it's a very thin line.

2. Utilizing Demo Time for Scripted Presentations

Short description:

Changing settings for clarity, stressing the importance of tools like Demo Time for scripted presentations within Visual Studio Code, eliminating context switching between applications, and facilitating audience interaction with shared repositories.

If I change everything to the settings that you just saw, it's a lot more clear for my audience to make it easier to read, but also easier to spot where my cursor is, actually. And in this case, it's on line 14. Presentations can be stressful, and for sure, live coding demos and things that you need to keep in mind. Most probably, you have a script next to your laptop when you're presenting. But you don't have to be stressed if you're using the right tools. One of those tools is Demo Time. And Demo Time is a tool that is actually created to give presentations within Visual Studio Code by scripting all the demos.

That way, you don't have to think about, oh, what can go wrong? No, you scripted it, so it's not going wrong. Everything is going smoothly, because you scripted it and it's going to run that exact way. And that's also how I created this presentation. So moving over from my code over to a slide, this is all done with Demo Time. And I just have to press on the right key, and it's doing the next thing. So Demo Time works like how slides work in PowerPoint or Keynote. You just click on the next key, and it's going to the next action. So everything is scripted within JSON with actions, like an open slide, open file, create file, and so on.

The benefit is that you're not context switching between multiple applications. So you don't lose track, and you don't have to create any snippets anymore. And it's easier to share with your audience, because you can give them something, a repository, for instance, that they can run by themselves, go through the slides, and through the code the same way how you were presenting it. To get started, all you have to do is open Visual Studio Code and go to the extension view, and then click or search for Demo Time. Click on the Install button, and then there's a new Demo Time panel where you can initialize it. From the moment you initialize it, it's going to create you a demo.json file. You can create multiple of these files, but the demo.json file is the default one. So what are you going to do? Whenever you create a demo file, you can start adding some actions.

3. Exploring Demo Time Actions and Slides Usage

Short description:

Exploring actions in Demo Time: creating code, opening files, highlighting code, and executing VS Code commands for a cleaner presentation. Utilizing Slides for Markdown presentations within Demo Time.

And most probably, the first action that you're going to add is creating code and opening the file. So this is what I'm going to do here. So this is my demo.json file, and there you can see the first action that I have, which is here, which is the file action. It's going to create me a file, and then replace some of the code with what I want to be inserted. The next action is a highlight code action, and this works exactly like this. So the moment I click on Next, it's going to highlight these lines, and I don't have to do anything. So I don't have to use any tool externally, like Zoom It, to zoom in on the code and to highlight it. So all is built into Demo Time.

Another thing that you can do is run any of the commands from Visual Studio Code. So with the Execute VS Code command action, so in this case, what I did for making it cleaner for when I'm presenting, is I first toggle it in full screen. Then I hide the title bar at the top, and I hide the editor tabs. So you don't see any tabs anymore. And I toggle the presentation mode in the Demo Time extension. And this is what you can do. You can run any of the commands that are available within Visual Studio Code, also the ones from external or third-party extensions. So if I click on Next, you see that it removes all the tabs, and it goes in full screen mode. So now there's less distractions, and this is where you can actually use this Execute VS Code command action but you can use it for anything else.

The third use case is Slides. Slides is a very useful one, because with presentations and with live coding presentations, most likely you will use Slides in order to explain a couple of things or showing some architecture and so on. Slides work with Markdown in Demo Time, and all you need to do is create an action, open Slides, providing the path to a Markdown file, and then the Markdown file looks like this. It can be grouped slides, and in this case, it's just one slide, where at the top you have a front matter section with a team and a layout. And then you write your content, and then the content will be shown like this. So I hope you like Demo Time. I hope you know what you can expect from Demo Time and how it can improve your presentation skills. So if you want to know more, check out the documentation at demotime.elio.dev. And by that, I want to say thank you very much for attending my session. I was Elio Straaf. Bye-bye. Enjoy the rest of your day.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Don't Solve Problems, Eliminate Them
React Advanced 2021React Advanced 2021
39 min
Don't Solve Problems, Eliminate Them
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Impact: Growing as an Engineer
React Summit 2022React Summit 2022
26 min
Impact: Growing as an Engineer
Top ContentPremium
This Talk explores the concepts of impact and growth in software engineering. It emphasizes the importance of finding ways to make the impossible possible and the role of mastery in expanding one's sphere of impact. The Talk also highlights the significance of understanding business problems and fostering a culture of collaboration and innovation. Effective communication, accountability, and decision-making are essential skills for engineers, and setting goals and finding sponsors can help drive career growth. Feedback, goal setting, and stepping outside of comfort zones are crucial for personal development and growth. Taking responsibility for one's own growth and finding opportunities for impact are key themes discussed in the Talk.
On Becoming a Tech Lead
TechLead Conference 2023TechLead Conference 2023
24 min
On Becoming a Tech Lead
Top ContentPremium
The role of a Tech Lead involves shaping the roadmap, helping the team be more effective, and working on important projects. Lessons learned include encouraging idea sharing, avoiding taking on all the work, and focusing on delegation. Tech Leads focus on the outcome, involve the team in decision-making, and make plans based on how different pieces will interact. The role of a Tech Lead is to focus on engineering and guide the team in figuring out how the whole system should fit together. Architecting can become problematic when it loses touch with the coding part, resulting in implementation issues.
Jotai Atoms Are Just Functions
React Day Berlin 2022React Day Berlin 2022
22 min
Jotai Atoms Are Just Functions
Top Content
State management in React is a highly discussed topic with many libraries and solutions. Jotai is a new library based on atoms, which represent pieces of state. Atoms in Jotai are used to define state without holding values and can be used for global, semi-global, or local states. Jotai atoms are reusable definitions that are independent from React and can be used without React in an experimental library called Jotajsx.
Debugging JS
React Summit 2023React Summit 2023
24 min
Debugging JS
Top Content
Watch video: Debugging JS
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
The Epic Stack
React Summit US 2023React Summit US 2023
21 min
The Epic Stack
Top Content
Watch video: The Epic Stack
This Talk introduces the Epic Stack, a project starter and reference for modern web development. It emphasizes that the choice of tools is not as important as we think and that any tool can be fine. The Epic Stack aims to provide a limited set of services and common use cases, with a focus on adaptability and ease of swapping out tools. It incorporates technologies like Remix, React, Fly to I.O, Grafana, and Sentry. The Epic Web Dev offers free materials and workshops to gain a solid understanding of the Epic Stack.

Workshops on related topic

React, TypeScript, and TDD
React Advanced 2021React Advanced 2021
174 min
React, TypeScript, and TDD
Top Content
Featured Workshop
Paul Everitt
Paul Everitt
ReactJS is wildly popular and thus wildly supported. TypeScript is increasingly popular, and thus increasingly supported.

The two together? Not as much. Given that they both change quickly, it's hard to find accurate learning materials.

React+TypeScript, with JetBrains IDEs? That three-part combination is the topic of this series. We'll show a little about a lot. Meaning, the key steps to getting productive, in the IDE, for React projects using TypeScript. Along the way we'll show test-driven development and emphasize tips-and-tricks in the IDE.
Web3 Workshop - Building Your First Dapp
React Advanced 2021React Advanced 2021
145 min
Web3 Workshop - Building Your First Dapp
Top Content
Featured Workshop
Nader Dabit
Nader Dabit
In this workshop, you'll learn how to build your first full stack dapp on the Ethereum blockchain, reading and writing data to the network, and connecting a front end application to the contract you've deployed. By the end of the workshop, you'll understand how to set up a full stack development environment, run a local node, and interact with any smart contract using React, HardHat, and Ethers.js.
Remix Fundamentals
React Summit 2022React Summit 2022
136 min
Remix Fundamentals
Top Content
Workshop
Kent C. Dodds
Kent C. Dodds
Building modern web applications is riddled with complexity And that's only if you bother to deal with the problems
Tired of wiring up onSubmit to backend APIs and making sure your client-side cache stays up-to-date? Wouldn't it be cool to be able to use the global nature of CSS to your benefit, rather than find tools or conventions to avoid or work around it? And how would you like nested layouts with intelligent and performance optimized data management that just works™?
Remix solves some of these problems, and completely eliminates the rest. You don't even have to think about server cache management or global CSS namespace clashes. It's not that Remix has APIs to avoid these problems, they simply don't exist when you're using Remix. Oh, and you don't need that huge complex graphql client when you're using Remix. They've got you covered. Ready to build faster apps faster?
At the end of this workshop, you'll know how to:- Create Remix Routes- Style Remix applications- Load data in Remix loaders- Mutate data with forms and actions
Vue3: Modern Frontend App Development
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Modern Frontend App Development
Top Content
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
The Vue3 has been released in mid-2020. Besides many improvements and optimizations, the main feature of Vue3 brings is the Composition API – a new way to write and reuse reactive code. Let's learn more about how to use Composition API efficiently.

Besides core Vue3 features we'll explain examples of how to use popular libraries with Vue3.

Table of contents:
- Introduction to Vue3
- Composition API
- Core libraries
- Vue3 ecosystem

Prerequisites:
IDE of choice (Inellij or VSC) installed
Nodejs + NPM
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
0 to Auth in an hour with ReactJS
React Summit 2023React Summit 2023
56 min
0 to Auth in an hour with ReactJS
WorkshopFree
Kevin Gao
Kevin Gao
Passwordless authentication may seem complex, but it is simple to add it to any app using the right tool. There are multiple alternatives that are much better than passwords to identify and authenticate your users - including SSO, SAML, OAuth, Magic Links, One-Time Passwords, and Authenticator Apps.
While addressing security aspects and avoiding common pitfalls, we will enhance a full-stack JS application (Node.js backend + React frontend) to authenticate users with OAuth (social login) and One Time Passwords (email), including:- User authentication - Managing user interactions, returning session / refresh JWTs- Session management and validation - Storing the session securely for subsequent client requests, validating / refreshing sessions- Basic Authorization - extracting and validating claims from the session token JWT and handling authorization in backend flows
At the end of the workshop, we will also touch other approaches of authentication implementation with Descope - using frontend or backend SDKs.