Inserts

Type a forward slash, a name, and Enter. The pattern appears where your cursor is.

It works at any indent, in any pane, and in the expanded editors.

The touch bar

The strip of icons along the bottom of a coding pane. Hover a category, see what is in it, click to insert at the cursor.

It is on the HTML and CSS panes and on plain-text extra panes. It is deliberately not on the Globals, JavaScript or Assets panes.

The insert modal

The inserts button on the bottom bar opens the full list, with Native and Custom tabs and a preview of whatever you select.

Base and -c

Many HTML patterns ship twice.

-c is the ready-to-wear version, with BEM classes already on it — hero__title and so on — so the stylesheet that comes with it fits straight away.

The base version is the bare structure. Take that one when you want total control of the markup, or a completely different CSS architecture.

Grabbing the styled versions for standard sections and the base versions for custom layouts is a good way to frame up a build.

The accessible widget set

Accordion, modal, tabs, form, nav, range, carousel and select ship as a set, each in both variants, and each written properly: real focus management, real keyboard handling, real ARIA.

These are the parts everyone gets slightly wrong, so they are worth having correct once.

One-click install

A widget ships under the same name in all three files. Choosing its HTML insert offers you the stylesheet and the behaviour that go with it, each written to a file you pick.

Two things worth knowing about how that behaves:

• The CSS is offered only for the -c variant, because it is written against those BEM classes. The JavaScript is offered for both, because it binds to data- attributes.
• Each block is written under a FEWD insert: <name> marker, so installing the same widget twice does nothing rather than duplicating it.

In Creative Mode the connected JavaScript file is rebuilt from the document, so free-standing code cannot live in it. FEWD will decline to install behaviour there rather than write something that the next save would erase. Use a separate script file, or Framework Mode.

Forms

A tab of its own, because a form is a page plus somewhere for it to post and which pair you need depends on the host. /astro-contact is one file for Astro with an adapter; /static-contact and /api-contact are the pair for a static site; /hosted-contact is for no server at all.

Setting one up end to end, including the DNS, has a page each: in Astro and in a static site.

Astro, Shopify and SEO

Three further sets, listed in full in the insert reference:

Astro — layouts, pages, components, dynamic routes, image handling, slots, content collections. Shopify — Storefront API patterns: product cards, listings, cart operations, search. SEO — meta blocks, Open Graph, Twitter cards, and eleven JSON-LD schemas.

Your own

Save as Insert… in the right-click menu turns anything you have written into an insert of your own. They live in the Custom tab and are available in every project.

Export Custom Inserts… and Import Custom Inserts… move the whole collection between machines, or to someone else.