Skip to main content

Example 1: Simple Live Coding App

Let's create a simple live coding app.

Create a scene​

First, create a scene of the Control node and add child nodes so that you have a tree like this:

Node tree
Control
  └ HBoxContainer
      ├ ReDScribeEditor
      └ RichTextLabel

To add a child node, right-click to display the menu and select it, or press Ctrl-A (or Command-A on macOS) to add it.

Add a child node

After adding child nodes, adjust their width:

  • Select "Full Rect" in the "Anchor Preset" of HBoxContainer
  • Check "Expand" under Horizontal Alignment of ReDScribeEditor
  • Check "Expand" under Horizontal Alignment of RichTextLabel

Full Rect

Horizontal Expand

Once you've split the screen into two sections—ReDScribeEdtior on the left and RichTextLabel on the right—try running the scene.

When you type in the editor area (on the left side), you might notice that the text appears quite small.

This happens because Godot supports hiDPI.

There are serveral ways to address this, but we'll resolve it by adjusting the project settings.

Project settings​

Open Project → Project Settings, and type "stretch" into the search bar.

Set the Stretch Scale value to "2.0".

Stretch Scale

Run the scene again. You should see the text appear larger than before.

info

You can also make this change using GDScript. In that case, write it as follows:

func _ready() -> void:
	get_window().content_scale_factor = 2.0

If you dont't want to set the scale project-wide, consider setting it individually as shown above. Also, if you're creating Example 2 within the same project, be sure to keep this in mind.

Create a theme​

You can also set a theme and customize the font size and font family.

In the Inspector for the Control node, under Theme, create a new theme resource.

Click the theme you created, and the Theme panel should appear at the bottom of the window.

Press the "＋" button to add the node you want to style with the theme. You can override properties to change the appearance from the default theme.

Create a theme

Here's how to change the font size:

Change the font size

Here's how to change the font family:

Change the font family

ReDScribeEditor node​

Try running the scene and writing some Ruby code.

You'll see that the code is highlighted with syntax colors—that's because the ReDScribeEditor node detects Ruby syntax and applies color highlighting.

ReDScribeEdtior

To enable automatic brace pairing, open the Inspector for the ReDScribeEditor node and set Auto Brace Completion to "On".

ReDScribeEdtior

Attach a GDScript​

You've now created a scene that displays an editor panel (ReDScribeEditor) on the left side of the screen, and a text panel (RichTextLabel) on the right. Just a few more steps to go!

To turn this into a simple live coding app, attach a GDScript to the Control node.

Next, to allow direct access to node using unique names like %NodeName in GDScript, enable Access as Unique Name for both ReDScribeEditor and RichTextLabel.

ReDScribeEdtior

extends Control

@onready var res := ReDScribe.new()

func _ready() -> void:
	res.method_missing.connect(_method_missing)
	%ReDScribeEditor.grab_focus()
	perform()


func perform() -> void:
	%RichTextLabel.text = ''
	res.perform(%ReDScribeEditor.text)


func add_circle() -> void:
	%RichTextLabel.add_text('◯')


func add_square() -> void:
	%RichTextLabel.add_text('■')


func _method_missing(method_name: String, _args: Array) -> void:
	match method_name:
		'circle': add_circle()
		'square': add_square()
		_: pass

Nothing will happen yet when you run the scene.

Connect the text_changed signal​

Finally, connect the text_changed signal from ReDScribeEditor to the perform in the Control node.

ReDScribeEdtior

func _on_re_d_scribe_editor_text_changed() -> void:
	perform()

Complete!​

That's it—you're all set. Try running the scene.

Whenever you type circle or square, a shape should appear dynamically on the right side of the screen.

ReDScribeEdtior

Believe it or not, we've built a simple live coding app using just around 30 lines of GDScript!

We gained a parser effortlessly—without any heavy lifting.

If we were to implement this purely in GDScript, how would it even be possible? You'd need to build a lexer, write a parser, and then evaluate an AST to execute code... That would take a tremendous amound of work.

Thanks to Ruby handling the parsing, the GDScript code can stay focused on display logic—like what to show on screen.

For example, switching add_circle or add_square to render in 2D or 3D would simply involve modifying the part of the code Godot specializes in, making room for many exciting extensions.

ReDScribeEditor was originally built as an addon node, but it's designed to work well even in regular scenes. Use it in apps like this one—where users write scripts and see them run in a GUI—and it can be a powerful tool.