<img
  src="https://static.invertase.io/assets/zapp/logo.svg"
  width="100"
  style={{
    margin: '0 auto',
  }}
/>

Zapp! is an online Flutter sandbox environment running directly in the browser. Zapp!
enables developers to quickly prototype Flutter applications without the requirement
of a local environment.

<Zapp id="flutter" />

## Features

Below is a list of the main features of Zapp!

<Grid>
  <Feature
    href="/features/packages"
    title="Support for any web compatible package"
    description="Use any web compatible package from pub.dev, just like you would locally by editing your pubspec.yaml."
  />
  <Feature
    href="/features/file-explorer"
    title="Create a project with multiple files & directories."
    description="The built in file explorer allows you to create a project with multiple files and directories."
  />
  <Feature
    href="/features/assets"
    title="Asset support"
    description="Add your own Flutter assets or use 3rd party package assets."
  />
  <Feature
    href="/editor"
    title="Built in IntelliSense support"
    description="The built in VSCode-like editor provides support for IntelliSense."
  />
  <Feature
    href="/features/share-and-embed"
    title="Sharing and embeding a project"
    description="Share and embed your projects on any website, perfect for documentation, tutorials and examples."
  />
  <Feature
    href="/features/previews"
    title="Instantly previewing your Flutter application"
    description="Preview your Flutter application instantly via a unique URL, hosted on zapp.page."
  />
  <Feature
    href="/features/pubdev-import"
    title="Pub Previews"
    description="Preview any package example directly from your favourite pub.dev packages."
  />
  <Feature
    href="/features/github-import"
    title="GitHub Import"
    description="Import any Dart or Flutter project from a GitHub repository or Gist."
  />
</Grid>

## Getting Started

To get started, head over to [Choosing a template](/templates).

export const Grid = (props) => {
  return (
    <div
      style={{
        display: "grid",
        gridTemplateColumns: "repeat(2, 1fr)",
        gap: "1rem",
      }}
    >
      {props.children}
    </div>
  );
};

export const Feature = (props) => {
  return (
    <a
      href={props.href}
      className="not-prose border dark:border-zinc-800"
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        padding: "2rem",
        borderRadius: "16px",
        textDecoration: "none",
        color: "inherit",
        textAlign: "center",
      }}
    >
      <h3
        style={{
          marginBottom: "1rem",
          fontSize: "17px",
          fontWeight: "bold",
        }}
      >
        {props.title}
      </h3>
      <p
        style={{
          fontSize: "14px",
          fontWeight: "normal",
        }}
      >
        {props.description}
      </p>
    </a>
  );
};
