LÖVE 2D · Lua export

Design a LÖVE 2D interface visually, export a main.lua

LÖVE has no built-in UI editor, so menus and HUDs usually start as rectangles typed out by hand. openconstructor lets you lay the screen out visually — from ready-made components or with the AI assistant — and exports a Lua file that draws the same layout in LÖVE.

Open the editor →

How it works

Build the screen on the canvas from the component library or with the AI assistant.
Click export ↓ and choose LÖVE 2D (Lua). openconstructor measures every visible box, border and text on the rendered page.
Save the file as main.lua in an empty folder and run it with LÖVE 11.x: love path/to/folder.

What the exported file does

Stores the design as a plain Lua table of nodes — position, size, fill colour, corner radius, border and text — that is easy to read and edit.
In love.load, sets the window title and opens a resizable, high-DPI window sized to fit your screen.
In love.draw, scales the whole design to the window and centres it, then draws rounded rectangles, borders and text with love.graphics.printf using the original alignment.
Creates fonts once per size and caches them.

-- excerpt of an exported file
local nodes = {
	{k = "button", x = 64, y = 120, w = 180, h = 44, bg = {0.89, 0.34, 0.18, 1}, r = 10,
	 t = "Play", c = {1, 1, 1, 1}, fs = 16, al = "center"},
}

Making it interactive

The export is a static snapshot: nothing reacts to the mouse yet. Because every node keeps its kind, rectangle and text, adding behaviour is straightforward — for example, convert the mouse position back into design coordinates in love.mousepressed and check which "button" node contains it. You can also copy the node table into your own game state and draw it from your existing code.

Limitations

No input handling, animation or state — layout and style only.
Gradients are approximated by a single solid colour (the first visible stop). Shadows, blur and images are not exported.
Text uses LÖVE's default font at the original sizes, so wrapping may differ slightly from the browser.

Working in Roblox instead? The Roblox UI export generates real ScreenGui instances with UICorner, UIStroke and UIGradient.

FAQ

Which LÖVE version is supported?

The exported main.lua targets LÖVE 11.x.

Does the UI resize with the window?

Yes. The design is scaled uniformly to fit the window and centred, so it keeps its proportions at any size.

Can I use custom fonts?

The export uses LÖVE’s default font. Replace love.graphics.newFont(size) in the font() helper with love.graphics.newFont("myfont.ttf", size) to use your own.

Ready to try it?

openconstructor is free, open source (MIT) and runs entirely in your browser. No sign-up is needed to build and export.