Live is the edge-native CMS based on fresh. It lets your business users live edit any fresh site.

Add the $live import to your import_map.json file:

{
  "imports": {
    "$live/": "https://deno.land/x/[email protected]/",
    "(...)": "(...)"
  }
}

Live ships some utilitary scripts which you can add to your project as needed.

You can use the component script to transform any HTML in your clipboard into a Preact component.

Add the component task to your deno.json file:

{
  "tasks": {
    "start": "(...)",
    "component": "deno eval 'import \"$live/scripts/component.ts\"'"
  },
  "importMap": "./import_map.json"
}

Then copy some HTML into your clipboard. For example:

<div>
  <span>Hello World</span>
  <img src="/test.jpg"> 
  <!-- note the unclosed img tag, which is invalid JSX -->
</div>

Then run the component task passing the ComponentName as first argument:

deno task component MyTestComponent

The new component will be generated in ./components/MyTestComponent.tsx and should look like this:

/** @jsx h */
/** @jsxFrag Fragment */
import { Fragment, h } from "preact";

export default function MyTestComponent() {
  return (
    <div>
      <span>Hello World</span>
      <img src="/test.jpg" />{" "}
      {/* note the closed img tag! */}
    </div>
  );
}

Aditionally, the import snippet will replace your clipboard content:

import MyTestComponent from '../components/MyTestComponent.tsx';

• cd examples/counter
• Create an .env file with:

SUPABASE_KEY=...
SUPABASE_ACCOUNT=...
DECO_SITE=...

• deno task start

Now browse:

http://localhost:8080/ for a dynamic page http://localhost:8080/test for a static page