Islands

An island is declared in JavaScript and mounted by a data-island attribute. State changes re-render only the selectors you name.

island("counter", {
  persist: true,
  state: { count: 0 },
  actions: {
    increment() { this.state.count++; },
    decrement() { this.state.count--; }
  },
  render(state) {
    return { ".count": state.count };
  }
});

<div data-island="counter">
    <button data-action="decrement">-</button>
    <span class="count">0</span>
    <button data-action="increment">+</button>
</div>

Optimistic updates

Update the UI instantly, then reconcile with the server. The first callback runs immediately; if the second fails, the first is rolled back.

await this.optimistic(
  () => { this.state.liked = true; },              // instant UI update
  () => api.post(`/posts/${this.data.id}/like`)    // rolls back on failure
);

Use ApiUtility (api.js) rather than raw fetch — it handles CSRF tokens and retries, and raw fetch is a feather check error.

Drag and drop

Built in via the draggable config. The full API is documented in the CLAUDE.md that ships with every project. Pair it with OrderingMixin on the model so positions persist.

Generating an island

feather generate island like-button

This writes the island file and wires it into the build. feather check reports an island no template mounts (orphan-island) and a template mounting an island that does not exist (missing-island).

⌘I

Get started

Building the UI

Backend

Features

Tooling

Testing

Deployment

Optimistic updates

Drag and drop

Generating an island

​Optimistic updates

​Drag and drop

​Generating an island

Optimistic updates

Drag and drop

Generating an island