Launched NPM | npm.io

Launched is a tool to make website content editable to clients with no codebase access or coding knowledge required. It was created by Michael Beck for the Launch platform.

To get started, check out https://launched.tech for documentation, guides, and demos.

!NOTE Launched is still in development. Be careful when using it in production.

Download

npm install launched

CDN

<!-- Include the Launched library -->
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/launched@latest/dist/bundle.js"
></script>

<!-- Include necessary dependencies -->
<script
  crossorigin
  src="https://cdn.jsdelivr.net/combine/npm/react@18.3.1/umd/react.production.min.js,npm/react-dom@18.3.1/umd/react-dom.production.min.js"
></script>
<script
  crossorigin
  src="https://update.greasyfork.org/scripts/499179/1402245/react_jsx-runtime-umd.js"
></script>

<!-- Include stylesheets -->
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/launched@latest/dist/ui/globals.css"
/>

Getting started

React

// src/index.jsx

/* Import the Launched provider */
import { LaunchedProvider } from "launched";

...

/* Add the provider to your app */
root.render(
  <LaunchedProvider>
    <App />
  </LaunchedProvider>
);

// src/app.jsx

/* Import the Launched Text element */
import { Text } from "launched/components";

...

export default function App() {
  return (
    <div>
      <Text tag="title" element="h1">Hello, world!</Text>
      <Text tag="description">Welcome to my site.</Text>
    </div>
  )
}

Static HTML

<!-- index.html -->

<!-- Initialize Launched -->
<script type="module" defer>
  const { Launched } = launched;

  const l = new Launched({
    mode: "static",
    save: (data) => console.log(data),
    determineVisibility: () => true,
  });
</script>

...

<body>
  <h1 data-tag="title">Hello world!</h1>
</body>