Nest is an experimental website-building tool

Add content like a text document

Blocks can be nested to organize and structure

Use custom CSS and classes for layout and style

Getting started

To make your own

sign up or login using your email

choose a name, to be used for your URL

create a page and start writing

To explore

you can view pages made by others in the list below

you can view them in edit mode

your edits will not be saved but it can be a good way to learn how to achieve different effects.

Controls

On Macs use command instead of control

Mouse

Left click

Select block

Right click or double click

Toggle show settings

Move block

Ctrl + ↑

Move up

Ctrl + ↓

Move down

Ctrl + ←

Move out a level

Ctrl + →

Move in a level

Add to sibling container

if possible

Ctrl + Shift + Enter

Move in a level

More block actions

Ctrl + Backspace

Delete block

Ctrl + s

Toggle show settings

In focused text block

Enter

New text block

Shift + Enter

Line break

Ctrl + Shift + Enter

Move block in a level

Escape

Unfocus text

Move selection

← or Escape

Move out a level

→ or Enter

Move in a level

Move block in a level

Move down

Text

You can use markdown shortcuts for headings and text styles

Links will autolink like nest.constraint.systems

You can use block styling (detailed below) to target text elements

Styling

Nest has some interesting styling possibilities, all based on CSS.

Don’t feel like you need to immediately digest this section. It may be better to get started and return here when you need it (or experiment on your own).

Theme

The theme CSS is shown at the bottom of the page. Using this you can apply any CSS to any section of your page.

To know what you can target (like the .block class) you can right click on a block to see its settings panel. This will show you what classes it has.

You can also use the browser’s built-in developer tools.

You can also define your own custom classes (“.gray { background: #ddd; }” for example) these classes will then show up as buttons in each block setting. Clicking a button will apply the class. Using this system you can define a custom class “paint palette” that you can apply to

You can download and import themes across spaces. You can achieve the same effect by copying and pasting the theme CSS.

Block settings

You can see block settings by right-clicking on a block or typing Ctrl + s

Block settings show you the classes of the block.

They also allow you to apply any custom classes defined in the theme.

You can also apply custom CSS. This CSS is scoped to the current block. Styles defined in { } will apply to the current block. Selectors can be used to target blocks nested in the current block.

Custom block CSS can be useful for layout, for example, { display: flex } will layout child blocks horizontally.

You can also add a background image through the block settings. Using this plus CSS rules for background-image sizing will allow you to make image rich pages.

Tips

Copy and paste is your friend. You can use it to quickly create templates for different block + styling structures.

Rules and disclaimers

This is an experimental project. I’ll try and plan to keep it running, but no guarantees.

If you want to make sure you can keep your designs, you can export your space into a plain HTML and CSS file.

Making a space private removes it from the lists and makes it visible only to it’s logged in owner.

If you use this space to bother anyone I will reserve the right to delete your space, generally I’ll try and warn in combination with making the space private.