Hero
Build pages, ship faster
A visual page-builder that lives inside your Laravel app. No headless CMS to operate, no separate admin to deploy.
Get started
2 Columns
Left
Drop a block here
Right
Drop a block here
Quote
We replaced our CMS with logged-cloud/page-studio in an afternoon. The team noticed instantly.
Button
$refs.input.focus())"
@keydown.window.meta.f.prevent="open = true; $nextTick(() => $refs.input.focus())"
@keydown.window="if ($event.key === '/' && !['INPUT','TEXTAREA'].includes(document.activeElement.tagName)) { open = true; $event.preventDefault(); $nextTick(() => $refs.input.focus()); }"
@keydown.escape.window="open = false; query = ''"
class="ps-pb-find-wrap">
Type to search · ↑↓ to navigate · Enter to jump · Esc to close.
No matches.
$refs.find.focus())"
@keydown.window.meta.h.prevent="open = true; $nextTick(() => $refs.find.focus())"
@keydown.escape.window="open = false"
class="ps-pb-find-wrap">
Ctrl-H · type a string to find, leave Replace blank to delete matches.
Keyboard shortcuts
| ? | This menu |
|---|---|
| Ctrl-F · / | Find blocks + nodes |
| Ctrl-H | Replace text across the page |
| Right-click block | Block context menu |
| Ctrl-Z / Ctrl-Shift-Z | Undo / redo |
| Ctrl-D | Duplicate selected node |
| Ctrl-C / Ctrl-V | Copy / paste a subgraph |
| Delete / Backspace | Remove selected nodes |
| Ctrl-Scroll | Zoom canvas (cursor-anchored) |
| Middle-mouse drag · Alt-drag | Pan canvas |
| Drag socket → socket | Connect |
| Drag socket → empty | Quick-add picker |
| Shift-drag mid-wire | Bend wire |
| Alt-click wire | Clear bend |
| Right-click chip / canvas | Context menu |
| Drag a number setting | Scrub value |
{ height = Math.max(120, Math.min(window.innerHeight - 80, origin + (start - ev.clientY))); };
const up = () => { window.removeEventListener('pointermove', move); window.removeEventListener('pointerup', up); };
window.addEventListener('pointermove', move);
window.addEventListener('pointerup', up);
$event.preventDefault();
"
title="Drag to resize the node drawer">
⏱ Revisions
⌘
Empty graph
Click a node type on the left to drop it onto this canvas.
Wire output sockets (right side of a node) to input sockets by clicking one then the other.
Insert variable
No variables on this route yet.
Save as snippet
Snippet library
No snippets yet · right-click any block and choose "Save as snippet..." to build the library.