Skip to main content
astrocraft-ui/ components · 101
Shop

Editable

Free · MIT

Headless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.

← Date PickerFile Upload →

Install

Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).

Unstyled — behavior only, you write the CSS

Install command
npx astrocraft-ui add forms/editable

Plain-CSS theme — no build step

Install command
npx astrocraft-ui add forms/editable --theme css

Tailwind theme — needs Tailwind v4

Install command
npx astrocraft-ui add forms/editable --theme tailwind

Plain-CSS theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add forms/editable --theme css --bridge lumos

Tailwind theme, re-pointed onto Lumos tokens

Install command
npx astrocraft-ui add forms/editable --theme tailwind --bridge lumos

Live demo

Editable

Click (or tab to and press Enter on) the title. Enter commits, Escape puts back what was there when the edit started, clicking away commits.

Attribute surface

With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.

ComponentSlotsVariantsRuntime stateNative state
`Editable.astro``editable`—`data-editing` `data-empty`—
`EditableInput.astro``editable-input``data-size`: `sm` · `md` · `lg`
`data-state`: `default` · `error` · `success`		——
`EditablePreview.astro``editable-preview`———

Source

What the command copies — 4 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.

src/components/ui/forms/editable/Editable.astro
---
import "../../../../styles/structure.css";

import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"div">;

const { class: className, ...rest } = Astro.props;
---

<div class={className} data-slot="editable" data-editing="false" {...rest}>
  <slot />
</div>

<script>
  import { onReadyOnce } from "../../_once";

  function wire(root: HTMLElement) {
    const preview = root.querySelector<HTMLElement>('[data-slot="editable-preview"]');
    const input = root.querySelector<HTMLInputElement>('[data-slot="editable-input"]');
    if (!preview || !input) return;

    let started = input.value;

    const show = (editing: boolean) => {
      input.hidden = !editing;
      preview.hidden = editing;
      root.dataset.editing = String(editing);
    };

    const paint = () => {
      const value = input.value.trim();
      preview.textContent = value || (preview.dataset.placeholder ?? "");
      preview.dataset.empty = String(value === "");
    };

    const start = () => {
      started = input.value;
      show(true);
      input.focus();
      input.select();
    };

    const stop = (commit: boolean) => {
      if (root.dataset.editing !== "true") return;
      if (!commit) input.value = started;
      show(false);
      paint();
      preview.focus();
      if (commit && input.value !== started) {
        input.dispatchEvent(new Event("change", { bubbles: true }));
      }
    };

    preview.addEventListener("click", start);
    input.addEventListener("keydown", (event) => {
      if (event.key === "Enter") {
        event.preventDefault();
        stop(true);
      } else if (event.key === "Escape") {
        event.stopPropagation();
        stop(false);
      }
    });
    input.addEventListener("blur", () => stop(true));

    paint();
    show(false);
  }

  onReadyOnce('[data-slot="editable"]', wire);
</script>
src/components/ui/forms/editable/EditableInput.astro
---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"input"> & {
  size?: "sm" | "md" | "lg";
  state?: "default" | "error" | "success";
};

const { size = "md", state = "default", class: className, ...rest } = Astro.props;
---

<input class={className} data-slot="editable-input" data-size={size} data-state={state} {...rest} />
src/components/ui/forms/editable/EditablePreview.astro
---
import type { HTMLAttributes } from "astro/types";

type Props = HTMLAttributes<"button"> & { placeholder?: string };

const { placeholder, class: className, ...rest } = Astro.props;
---

<button
  type="button"
  class={className}
  data-slot="editable-preview"
  data-placeholder={placeholder}
  {...rest}
>
  <slot />
</button>
src/components/ui/forms/editable/index.ts
import Editable from "./Editable.astro";
import EditableInput from "./EditableInput.astro";
import EditablePreview from "./EditablePreview.astro";

export { Editable, EditableInput, EditablePreview };
export default Editable;

What you get

The component source, copied into your project by npx astrocraft-ui add forms/editable — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.