> ## Documentation Index
> Fetch the complete documentation index at: https://docs.divvi.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Live Preview

export const EditPage = ({editUrl, lastModified}) => {
  const formatDate = isoString => {
    if (!isoString) return null;
    try {
      const date = new Date(isoString);
      return date.toLocaleString("en-US", {
        dateStyle: "medium",
        timeStyle: "short"
      });
    } catch {
      return null;
    }
  };
  const formattedDate = formatDate(lastModified);
  return <div className="pt-6 mt-6 mb-6">
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <a href={editUrl} target="_blank" rel="noopener noreferrer" className="inline-flex items-center gap-1.5 text-sm font-medium text-primary no-underline not-prose">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
            <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
            <path d="m18.5 2.5 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
          </svg>
          Suggest changes to this page
        </a>
        {formattedDate && <span className="text-sm text-gray-500 not-prose">
            Last updated: {formattedDate}
          </span>}
      </div>
    </div>;
};

Hooks in development can be easily tested in a Divvi app using the live preview feature.

<video controls muted playsInline width="100%">
  <source src="https://raw.githubusercontent.com/divvi-xyz/hooks/main/docs/assets/live-preview.mp4" />
</video>

## Steps

1. Run `yarn start` to start the development server.
2. Open the app (*e.g.*, the Valora wallet or another Divvi app) on your phone and go to the QR scanner screen.
3. Scan the QR code displayed in the terminal.

## Additional Information

While in preview mode, changes to your hooks will reload the development server automatically.
You may need to pull down to refresh the screen in the app to see the changes.

The app shows a banner at the top of the screen when in preview mode. The color of the banner changes based on the fetch status for hooks.

* grey -> idle/loading
* green -> success
* red -> error

> \[!IMPORTANT]
> Check the terminal for errors in the development server if you see a red banner, and make sure your phone and computer are on the same network.

<EditPage editUrl="https://github.com/divvi-xyz/hooks/edit/main/docs/live-preview.md" lastModified="2025-02-19T14:27:25.000Z" />