castomUI
Open castomUI

Pages and blocks

A site is a tree of pages,and a page is a list of blocks.

That is the whole mental model, and castomUI keeps it that way on purpose. The Pages window holds the tree. Open a page and its blocks line up beside the live preview — each one a component with a form, not a heap of markup somebody has to be careful around.

The page tree,
with the flags that matter.

Pages nest under one another and reorder by dragging, so the tree you see is the structure the site has. Each page carries a thumbnail screenshot and a row of flags you can read at a glance: homepage, 404, draft, hidden, hidden from the sitemap, connected to a dataset, and the language it is written in.

Page details hold the name, the URL, the parent page, a base page, the language, the template it sits in, the styles, and the search engine instructions: index or noindex, follow or nofollow, and a canonical address.

Page settings are the switches you reach for most. Mark it a draft and it cannot be published until you unmark it. Include or leave out the template header and footer. Keep it out of the sitemap, or hide it completely.

Every page also has a description and a short purpose of this page — two sentences you write for the AI, not for visitors, so that anything generated later knows what the page is for.

Pages windowIllustration
  • ⌂HomeHomepage · EN · template "Main"
  • 1ServicesThree child pages, dragged into order.
  • 2Products / {record}Dataset connected — one page per record in the view.
  • ·Winter offerDraft. Hidden from the sitemap. Cannot be published yet.
  • 3KontaktPL · cloned and translated from "Contact".
  • !Not found404 page · no header, no footer.

Invented example projectFlags read, not guessed

Making pages

By hand, by AI, by copying,
or from a dataset.

New page, manually

Choose a template, a parent and a language, give it a name, and it appears in the tree ready for blocks. The New page window also offers to generate the page with AI instead, from instructions.

Clone a page

Copy a page with its blocks when the next one should start where the last one ended. Useful for service pages that share a shape and differ in every sentence.

Clone and translate

Copy a page into a target language in one step, full or shallow, with a model you choose — DeepL when speed matters, a language model when the tone does.

Dataset pages

Connect a page to a dataset view and it becomes a template page: one page per record, so a hundred products need one design, not a hundred copies of it.

A whole sitemap

Generate the page structure with AI from instructions and a source URL, and decide whether existing pages are kept, hidden or removed.

Screenshots

Capture a page, then draw on the screenshot to explain what should change. Faster than a paragraph that begins "the thing on the left, slightly lower".

Lay the site out first.
The words can follow.

Blocks:
the content, one component at a time.

Open a page and its blocks list shows what it is made of, top to bottom. Each row moves up or down, hides and shows, clones, edits or goes. Click one and it is shown and highlighted on the preview, so there is never a question of which "text with image" you are about to change. Badges mark blocks that carry an anchor and blocks that belong to a switcher — a set of interchangeable blocks occupying one place — along with each block's language.

Every block is an instance of a component, and its settings form is generated from that component's data structure. A heading field, an image picker, a list of cards, a colour: whatever the component declares, the form offers. Nobody needs to open code to change a sentence, and nobody can break the layout by changing one.

Block details hold the name, the language, a CSS style name, the driver, the anchor and the switcher. For the people who prefer it, the raw JSON settings are one tab away, validated before they are saved.

A block is not married to its component. Change the component behind it, clone the component just for this block when one instance needs to differ, or regenerate it. Move or clone the block to another page, or into a template so it appears everywhere. Translate a block, deep or shallow, with or without a clone.

AI where the block is.

Change a block with AI in a simple mode — say what should be different — or an advanced one, where you tick which parts of the project go in as context: project information, styles, the page, its other blocks.

Generate page content with AI takes instructions, an optional source URL to scrape, and a choice of where the components come from: this project, rated components, connected projects, or all rated components. Existing blocks are kept, hidden or removed — your call. Recreate with brand new components starts the page over when the structure itself is the problem.

And Generate all the content runs AI over every block marked ready on the page, one after another, so a page of placeholders becomes a page of drafts while you read the first.

Everywhere AI acts

Generate page contentIllustration
  • 1Instructions"Pricing page for a small accounting office. Three packages, an FAQ, one call to action."
  • 2Source URLThe old pricing page, scraped for facts.
  • 3Components fromThis project only — keep the house look.
  • ?Existing blocksHide, not remove. Easier to compare.
  • 4ResultNew blocks in the list, each an editable form. Page still a draft.

Invented promptReview before unmarking draft

Around the pages

Menus, META,
and the plumbing.

Menus

As many menus as the project needs, per language; hide, clone or remove them. Elements nest by dragging and link to a page or any URL, with a title, target window, CSS style, image or icon, and visibility. Add elements builds a menu from a page's anchors in one go — the one-page site's navigation, done. Clone a menu and translate it with the rest of the language.

SEO, META and OpenGraph

Every page has a title, description and keywords, with Generate META with AI beside them, and its own OpenGraph values overriding the project defaults. The META tab lists all pages with inline-editable URL, title, description, keywords and canonical — see SEO and migration.

Redirects

A redirection list in project settings, 301 or 302, so a rebuilt site does not quietly lose the addresses people and search engines already know.

Global variables

Typed values defined once and used anywhere in the project — a phone number, an opening time, a price — so changing one does not mean hunting through forty blocks.

Why the form,
and not the code.

A page built from forms can be handed to somebody who should not touch HTML — a client, a colleague, the person who knows what the opening hours actually are — without a rule about which parts to avoid. The component owns the markup; the block owns the content. The two only meet in the preview.

It also means the site stays consistent as it grows. Forty pages built from twelve components look like one website. Forty pages built from forty pasted snippets look like forty afternoons.

A small warning: the draft flag exists because "I'll just check it once more before it goes live" is said with great sincerity and very little follow-through. Mark it draft. The publish button will remember for you.

Every window,
one website.

Open the editor and arrange them the way the job needs.

Open castomUI See pricing

Illustrations by GetIllustrations.com (Ghost pack).