Skip to content

Repository files navigation

BRE Logo

BlueprintRobloxEditor

BRE (Blueprint Roblox Editor) is a blueprint editor for creating Roblox games using a plugin within Roblox Studio.

The project uses Rojo, a VS Code extension for managing Roblox projects.

DevForum post: https://devforum.roblox.com/t/v11-blueprint-roblox-editor-visual-programming-tools-for-luau/4058664?u=ptitloup132

Latest release: https://github.com/Program132/BlueprintRobloxEditor/releases/tag/V2.4

image

image

image

Installation

You can clone the repository and build the plugin yourself:

git clone https://github.com/Program132/BlueprintRobloxEditor.git
cd BlueprintRobloxEditor
rojo build -o BlueprintRobloxEditor.rbxmx

You can also download the latest release!

Once you have the plugin, copy it to your Roblox plugins folder:

Windows (PowerShell):

Copy-Item"BlueprintRobloxEditor.rbxmx""$env:LOCALAPPDATA\Roblox\Plugins\BlueprintRobloxEditor.rbxmx"
  • Windows path:%LOCALAPPDATA%\Roblox\Plugins\
  • Mac path:/Users/$USER/Library/Application Support/Roblox/Versions/<version>/Plugins

Managing Projects

Roblox plugins have limited access to your local file system, so project management works slightly differently:

Saving a Project

  1. Click the Save Project button in the top bar.
  2. The plugin will automatically save your state inside Roblox Studio's local plugin settings so you don't lose progress if you close Studio.
  3. For backing up to an actual file: The plugin creates a StringValue named __BlueprintExport under the Workspace.
  4. Select __BlueprintExport in the Explorer, go to the Properties panel, and copy the text in the Value property.
  5. Paste this text into a new text file and save it as my_project.json on your computer.

Loading a Project

  1. To load an external project file, click Open Project in the top bar.
  2. A native file dialog will appear. Select your .json project file.
  3. The Blueprint Editor will now load and render the project!

Controls & Shortcuts

ActionControl
Add NodeRight-click on the canvas to open the node menu.
Move NodeDrag the header of any node.
Connect PinsDrag from an output pin to an input pin.
Delete NodeHover over a node and press Delete or Backspace.
Pan CanvasRight-click or Middle-click and drag the background.
ZoomUse the Mouse Wheel to zoom in/out.
CommentsDrag left-click to select multiple nodes, then press C to wrap them in a comment box. Double-click the comment label to edit its title.

Creating Custom Nodes

Adding a new node to the editor is simple. Each node is a Luau module located in src/shared/nodes/.

1. Node Structure

Create a new file (e.g., MyNode.luau) and follow this template:

localNode=require(script.Parent.Parent.Node) -- Adjust pathlocalNodeType=require(script.Parent.Parent.NodeType)
localIO=require(script.Parent.Parent.IO)
localMyNode= {}
MyNode.__index=MyNodesetmetatable(MyNode, Node) functionMyNode.new()
-- NodeType.METHOD for nodes with Exec pins, NodeType.FUNCTION for pure data nodeslocalself=Node.new("My Node Name", NodeType.METHOD)
setmetatable(self, MyNode)
-- Customize appearanceself:editColor(Color3.fromRGB(100, 150, 200))
-- Add pinsself:addInput(IO.Input.new("Exec", "")) -- Exec pinself:addInput(IO.Input.new("Text", '"Hello"'))
self:addOutput(IO.Output.new("Exec", ""))
returnselfend

2. Examples

Example A: Print (Method Node)

A node that performs an action and has execution flow.

functionMyNode.new()
localself=Node.new("Print", NodeType.METHOD)
setmetatable(self, MyNode)
self:addInput(IO.Input.new("Exec", ""))
self:addInput(IO.Input.new("Text", '"Hello"'))
self:addOutput(IO.Output.new("Exec", ""))
returnselfendfunctionMyNode:toLuau()
localtext=self:getInput("Text").Valuereturn`print({text})\n`end

Example B: Add (Pure Data Node)

A node that returns a value to be used by other nodes, without execution pins.

functionAdd.new()
localself=Node.new("Add", NodeType.FUNCTION)
setmetatable(self, Add)
self:addInput(IO.Input.new("A", "0"))
self:addInput(IO.Input.new("B", "0"))
self:addOutput(IO.Output.new("Result", "0"))
returnselfendfunctionAdd:toLuau()
locala=self:getInput("A").Valuelocalb=self:getInput("B").Value-- We store the expression in the output so other nodes can use itself:getOutput("Result").Value=`({a} + {b})`-- Pure data nodes usually return an empty string because -- they don't generate a standalone line of code.return""end

3. Registering the Node

Once created, you must register it in src/plugin/init.server.luau and src/plugin/ui/NodeMenu.luau.

In init.server.luau:

Add your node to the Nodes table:

localNodes= {
...
["My Node Name"] =require(Shared.nodes.MyNode),
}

In NodeMenu.luau:

Add it to the NODES_DATA table so it appears in the right-click menu:

localNODES_DATA= {
{
category="My Category",
color=Color3.fromRGB(100, 150, 200),
items= {
{ id="My Node Name", name="My Custom Node", type="Method" }
}
},
...
}

About

Visual programming tools for Luau/Lua

Resources

Stars

4 stars

Watchers

0 watching

Forks

Releases

Contributors

Languages