Flowbite Svelte WYSIWYG Text Editor

https://flowbite-svelte.com/docs/plugins/wysiwyg
Admin
The Flowbite Svelte WYSIWYG Text Editor is an open-source component for Svelte, built with Tailwind...
Tokens:212,168
Snippets:733
Trust Score:8.7
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize SvelteKit or Svelte Project and Install Dependencies

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/quickstart

These commands guide you through setting up a new SvelteKit or Svelte project using `npx sv create` or `npm create vite`, followed by navigating into the project directory and installing initial dependencies with `pnpm install`.

```bash
npx sv create my-app
cd my-app
pnpm install
```

```bash
npm create vite@latest myapp -- --template svelte
cd myapp
pnpm install
```

--------------------------------

### Install Flowbite Svelte Core and Icons

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/quickstart

These commands install the main Flowbite Svelte library and its dependencies, along with the optional `flowbite-svelte-icons` package, which is recommended for full example functionality and icon support.

```bash
pnpm i -D flowbite-svelte flowbite
```

```bash
pnpm i -D flowbite-svelte-icons
```

--------------------------------

### Install Tailwind CSS and Run Development Server

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/quickstart

This snippet demonstrates how to add Tailwind CSS to your Svelte project using `npx sv add tailwindcss`, install its dependencies, and then start a local development server to preview your application.

```bash
npx sv add tailwindcss
pnpm install
```

```bash
pnpm dev
```

--------------------------------

### Import and Use Flowbite Svelte Component

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/quickstart

This Svelte code example demonstrates how to import a component, specifically the `Alert` component, from the `flowbite-svelte` library and use it within your Svelte page. It includes basic styling and content to display an informational alert.

```svelte
<script>
  import { Alert } from "flowbite-svelte";
</script>

<div class="p-8">
  <Alert>
    <span class="font-medium">Info alert!</span>
    Change a few things up and try submitting again.
  </Alert>
</div>
```

--------------------------------

### Install Flowbite Svelte Icons (Optional)

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/introduction

This optional command installs the Flowbite Svelte Icons library as a development dependency, which is required for some examples and provides a set of icons for your application.

```bash
pnpm i -D flowbite-svelte-icons
```

--------------------------------

### Install Flowbite Svelte Dependencies

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/introduction

This command installs the core Flowbite Svelte and Flowbite libraries as development dependencies into your project, enabling the use of Flowbite components.

```bash
pnpm i -D flowbite-svelte flowbite
```

--------------------------------

### Install Flowbite Svelte Chart Plugin

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/plugins/charts

Instructions for installing the `@flowbite-svelte-plugins/chart` package using pnpm, a prerequisite for using Flowbite Svelte chart components.

```bash
pnpm i -D @flowbite-svelte-plugins/chart
```

--------------------------------

### Accessing Flowbite Svelte Documentation for AI Prompts

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/ai-integration

This JavaScript example demonstrates how to fetch Flowbite Svelte component documentation in markdown format from a specific URL. The retrieved markdown content is then incorporated into a prompt string, illustrating how AI assistants can be fed structured documentation to generate code examples or provide information based on official project resources.

```JavaScript
// Accessing component documentation in markdown format
const buttonDocs = await fetch("https://flowbite-svelte.com/docs/components/buttons.md").then((res) => res.text());

// Using markdown documentation in a ChatGPT prompt
const chatGptPrompt = `Based on this Flowbite Svelte Button component documentation:
${buttonDocs}

Generate a code example for a primary button with  a link to '/about'.`;
```

--------------------------------

### Run Local Development Server

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/introduction

This command starts a local development server for the Svelte project, allowing you to preview your application in a browser.

```bash
pnpm dev
```

--------------------------------

### Initialize Svelte Project with Vite

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/introduction

This snippet shows how to quickly set up a new Svelte project using Vite, navigate into the project directory, and install its dependencies using `pnpm`.

```bash
npm create vite@latest myapp -- --template svelte
cd myapp
pnpm install
```

--------------------------------

### Setup Flowbite Svelte Device Mockup Component

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/device-mockups

Instructions for importing the DeviceMockup component from the Flowbite Svelte library into your Svelte application.

```Svelte
<script>
  import { DeviceMockup } from "flowbite-svelte";
</script>
```

--------------------------------

### Initialize SvelteKit Project

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/introduction

This snippet provides the commands to create a new SvelteKit application using `npx sv create`, navigate into the project directory, and install its dependencies using `pnpm`.

```bash
npx sv create my-app
cd my-app
pnpm install
```

--------------------------------

### Install vite-plugin-tailwind-purgecss

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/faq-and-tips

This command installs `vite-plugin-tailwind-purgecss` as a development dependency. This plugin is essential for purging unused CSS from Tailwind CSS, significantly reducing the final bundle size of a SvelteKit application.

```Shell
pnpm i -D vite-plugin-tailwind-purgecss
```

--------------------------------

### Setup Flowbite Svelte Indicator Component

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/indicators

This snippet demonstrates how to import the `Indicator` component from the `flowbite-svelte` library, which is the first step to using it in a Svelte application.

```Svelte
<script>
  import { Indicator } from "flowbite-svelte";
</script>
```

--------------------------------

### Install Flowbite-Svelte WYSIWYG Text Editor with pnpm

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/plugins/wysiwyg

This command installs the Flowbite-Svelte WYSIWYG text editor plugin, along with its dependencies `lowlight` and `@tiptap/core`, using pnpm. It specifies the latest version for the text editor and a beta version for TipTap, which contains breaking changes.

```pnpm
pnpm i -D @flowbite-svelte-plugins/texteditor@latest lowlight @tiptap/core@3.0.0-beta.24
```

--------------------------------

### Install Tailwind CSS in Svelte Project

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/introduction

This snippet provides the commands to install Tailwind CSS into an existing Svelte project using `npx sv add tailwindcss` and then install the necessary dependencies with `pnpm`.

```bash
npx sv add tailwindcss
pnpm install
```

--------------------------------

### Implement Simple Previous/Next Navigation with PaginationNav in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/pagination

This Svelte example demonstrates a simplified `PaginationNav` component used for basic 'Previous' and 'Next' navigation without displaying individual page numbers. It shows how to use the `layout="navigation"` prop and includes examples for both default and large sizes.

```Svelte
<script lang="ts">
  import { PaginationNav } from "flowbite-svelte";
  let currentPage = $state(1);
  const totalPages = 20;

  function handlePageChange(page: number) {
    currentPage = page;
    // Additional logic here
    console.log("Page changed to:", page);
  }
</script>

<PaginationNav {currentPage} {totalPages} onPageChange={handlePageChange} layout="navigation" />
<PaginationNav size="large" {currentPage} {totalPages} onPageChange={handlePageChange} layout="navigation" />
```

--------------------------------

### Display Laptop Mockup in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/device-mockups

This example illustrates how to use the DeviceMockup component to display a screenshot of your application within a laptop mockup. It's ideal for demonstrating desktop or web application interfaces.

```Svelte
<script>
  import { DeviceMockup } from "flowbite-svelte";
</script>

<DeviceMockup device="laptop">
  <img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/laptop-screen.png" class="h-[156px] w-full rounded-xl md:h-[278px] dark:hidden" alt="laptop example 1" />
  <img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/laptop-screen-dark.png" class="hidden h-[156px] w-full rounded-lg md:h-[278px] dark:block" alt="laptop example 2" />
</DeviceMockup>
```

--------------------------------

### Basic Svelte Card with Title and Description

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/card

This example shows a simple `Card` component with a title and a paragraph of text. It also demonstrates how to make the entire card a clickable link by setting the `href` prop.

```Svelte
<Card href="/cards" class="p-4 sm:p-6 md:p-8">
  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
  <p class="leading-tight font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</Card>
```

--------------------------------

### Implement Timeline Stepper in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/stepper

This example illustrates the usage of the `TimelineStepper` component from `flowbite-svelte` to present steps in a timeline format. Each step can include a `label`, `description`, and `status`, allowing for a detailed visual representation of progress.

```Svelte
<script lang="ts">
  import { TimelineStepper } from "flowbite-svelte";
</script>

<TimelineStepper
  steps={[
    { label: "Personal Info", description: "Step details here", status: "completed" },
    { label: "Account Info", description: "Step details here", status: "current" },
    { label: "Review", description: "Step details here", status: "pending" },
    { label: "Confirmation", description: "Step details here", status: "pending" }
  ]}
/>
```

--------------------------------

### Set Progressradial Starting Position in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/extend/progressradial

This example illustrates how to change the starting point of the `Progressradial` component's progress bar. The `startingPosition` prop allows you to orient the beginning of the progress from different cardinal directions (top, right, bottom, left).

```Svelte
<script>
  import { Progressradial } from "flowbite-svelte";
</script>

<Progressradial />
<Progressradial progress={50} startingPosition="right" />
<Progressradial progress={50} startingPosition="bottom" />
<Progressradial progress={50} startingPosition="left" />
```

--------------------------------

### Svelte Video Player with Muted Autoplay

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/video

This example combines the `autoplay` and `muted` attributes to automatically start the video without sound. This is useful for background videos or when sound is not immediately desired.

```Svelte
<Video src="/videos/flowbite.mp4" autoplay muted controls trackSrc="flowbite.mp4" />
```

--------------------------------

### Utilize Blur Transition Effect for Svelte Toasts

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/toast

This Svelte example illustrates how to apply the blur transition to toast components. It shows how to configure the blur amount and introduce a delay before the transition starts, enhancing the visual presentation of notifications with a subtle effect.

```Svelte
<script>
  import { Toast } from "flowbite-svelte";
  import { blur } from "svelte/transition";
  import { BellOutline } from "flowbite-svelte-icons";
</script>

<Toast transition={blur} color="purple" params={{ amount: 10 }} class="mb-4">
  {#snippet icon()}
    <BellOutline class="h-6 w-6" />
  {/snippet}
  Transition type: blur, amount: 10
</Toast>

<Toast transition={blur} color="purple" params={{ amount: 50, delay: 1000 }}>
  {#snippet icon()}
    <BellOutline class="h-6 w-6" />
  {/snippet}
  Transition type: blur, amount: 50, delay 1000
</Toast>
```

--------------------------------

### Apply Solid Background to Flowbite Svelte Navbar

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/navbar

This Svelte example demonstrates how to change the default transparent background of the Flowbite Svelte Navbar component to a solid color using Tailwind CSS classes. It shows a basic Navbar setup with navigation links and a custom background.

```Svelte
<script>
  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from "flowbite-svelte";
</script>

<Navbar class="bg-primary-100 dark:bg-primary-700">
  <NavBrand href="/">
    <img src="/images/flowbite-svelte-icon-logo.svg" class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
  </NavBrand>
  <NavHamburger />
  <NavUl>
    <NavLi href="/">Home</NavLi>
    <NavLi href="/about">About</NavLi>
    <NavLi href="/docs/components/navbar">Navbar</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi>
  </NavUl>
</Navbar>
```

--------------------------------

### Get and Set Text Editor Content in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/plugins/wysiwyg

This Svelte example demonstrates how to retrieve the current HTML content from a Flowbite-Svelte TextEditor instance and how to programmatically update its content using the editor's commands. It showcases basic interaction with the editor's state.

```Svelte
<script lang="ts">
  import { AlignmentButtonGroup, TextEditor } from "@flowbite-svelte-plugins/texteditor";
  import type { Editor } from "@tiptap/core";
  import { Button } from "flowbite-svelte";

  let editorInstance = $state<Editor | null>(null);

  function getEditorContent() {
    return editorInstance?.getHTML() ?? "";
  }

  function setEditorContent(content: string) {
    editorInstance?.commands.setContent(content);
  }

  const content = "<p>Flowbite-Svelte is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p>";
</script>

<TextEditor bind:editor={editorInstance} {content}>
  <AlignmentButtonGroup editor={editorInstance} />
</TextEditor>

<div class="mt-4">
  <Button onclick={() => console.log(getEditorContent())}>Log Content</Button>
  <Button onclick={() => setEditorContent("<p>New content!</p>")}>Set Content</Button>
</div>
```

--------------------------------

### Implement Informational Banner with CTAs in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/banner

This Svelte example shows how to create an informational banner with a heading, a descriptive paragraph, and two call-to-action buttons. It utilizes Flowbite Svelte's `Banner` and `Button` components, along with icons for visual enhancement, to convey important messages and guide user actions.

```Svelte
<script>
  import { Banner, Skeleton, ImagePlaceholder, Button } from "flowbite-svelte";
  import { BookOpenOutline, ArrowRightOutline } from "flowbite-svelte-icons";
</script>

<Skeleton class="py-4" />
<ImagePlaceholder class="py-4" />

<Banner>
  <div class="mb-4 md:me-4 md:mb-0">
    <h2 class="mb-1 text-base font-semibold text-gray-900 dark:text-white">Integration is the key</h2>
    <p class="flex items-center text-sm font-normal text-gray-500 dark:text-gray-400">You can integrate Flowbite with many tools to make your work even more efficient and lightning fast based on Tailwind CSS.</p>
  </div>
  <div class="flex shrink-0 items-center gap-3">
    <Button href="/" size="sm" color="alternative">
      <BookOpenOutline class="me-2 h-3 w-3" /> Learn more
    </Button>
    <Button href="/" size="sm">
      Get started <ArrowRightOutline class="ms-2 h-3 w-3" />
    </Button>
  </div>
</Banner>
```

--------------------------------

### Toggle Invisible Characters in Svelte Text Editor

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/plugins/wysiwyg

This example illustrates the use of the `InvisibleButtonGroup` component to control the visibility of invisible elements (like line breaks) within a Svelte text editor. It provides functions to get and set the editor's HTML content, demonstrating how to manage non-rendering characters.

```Svelte
<script lang="ts">
  import { InvisibleButtonGroup, TextEditor } from "@flowbite-svelte-plugins/texteditor";
  import type { Editor } from "@tiptap/core";

  let editorInstance = $state<Editor | null>(null);

  function getEditorContent() {
    return editorInstance?.getHTML() ?? "";
  }

  function setEditorContent(content: string) {
    editorInstance?.commands.setContent(content);
  }

  const content = `
      <h1>
        This is a heading.
      </h1>
      <p>
        This<br>is<br>a<br>paragraph.
      </p>
      <p>
        This is a paragraph, but without breaks.
      </p>
    `;
</script>

<TextEditor bind:editor={editorInstance} {content} contentprops={{ id: "invisible-ex" }}>
  <InvisibleButtonGroup editor={editorInstance} />
</TextEditor>
```

--------------------------------

### Importing Flowbite Svelte Table Components for Setup

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/table

This Svelte snippet illustrates the essential imports required from `flowbite-svelte` to begin using table components. It includes `Table`, `TableBody`, `TableBodyCell`, `TableBodyRow`, `TableHead`, `TableHeadCell`, `Checkbox`, and `TableSearch`, providing the foundational elements for building interactive tables.

```Svelte
<script>
  import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead, TableHeadCell, Checkbox, TableSearch } from "flowbite-svelte";
</script>
```

--------------------------------

### Integrate Bubble Menu in Svelte Text Editor

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/plugins/wysiwyg

This example illustrates how to add a contextual bubble menu to a Svelte text editor using the `@flowbite-svelte-plugins/texteditor` library. The bubble menu appears near selected text, providing quick access to formatting options. It also includes utility functions for getting and setting the editor's content.

```Svelte
<script lang="ts">
  import { TextEditor, AlignmentButtonGroup, UndoRedoButtonGroup, BubbleMenu } from "@flowbite-svelte-plugins/texteditor";
  import { Button } from "flowbite-svelte";
  import type { Editor } from "@tiptap/core";

  let editorInstance = $state<Editor | null>(null);

  function getEditorContent() {
    return editorInstance?.getHTML() ?? "";
  }

  function setEditorContent(content: string) {
    editorInstance?.commands.setContent(content);
  }

  const content = "<p>Flowbite-Svelte is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p>";
</script>

<TextEditor bind:editor={editorInstance} {content} contentprops={{ id: "bubble-menu-ex" }}>
  <UndoRedoButtonGroup editor={editorInstance} />
  <AlignmentButtonGroup editor={editorInstance} />
  <BubbleMenu editor={editorInstance} />
</TextEditor>

<div class="mt-4">
  <Button onclick={() => console.log(getEditorContent())}>Get Content</Button>
  <Button onclick={() => setEditorContent("<p>New content!</p>")}>Set Content</Button>
</div>
```

--------------------------------

### Generate Component Documentation and Props JSON for Flowbite Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/how-to-contribute

This command updates prop files by generating component documentation for all Svelte files within the `src/lib` directory and creating JSON files with props information, placing them in the `routes/component-data` directory. This is crucial for maintaining up-to-date component documentation.

```Shell
pnpm svelte-helpers
```

--------------------------------

### Implement Default Flowbite Svelte Footer

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/footer

This example shows a basic footer implementation using `flowbite-svelte`. It includes a copyright notice and a group of navigation links, demonstrating how to structure a simple footer with essential information.

```Svelte
<script>
  import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from "flowbite-svelte";
</script>

<Footer>
  <FooterCopyright href="/" by="Flowbite™" year={2022} />
  <FooterLinkGroup class="mt-3 flex flex-wrap items-center text-sm text-gray-500 sm:mt-0 dark:text-gray-400">
    <FooterLink href="/">About</FooterLink>
    <FooterLink href="/">Privacy Policy</FooterLink>
    <FooterLink href="/">Licensing</FooterLink>
    <FooterLink href="/">Contact</FooterLink>
  </FooterLinkGroup>
</Footer>
```

--------------------------------

### Implementing a Responsive Default Sidebar in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/sidebar

This comprehensive example demonstrates how to create a responsive sidebar with menu items, icons, and labels using Flowbite Svelte components. It includes state management for active URLs and sidebar visibility, dynamic icon rendering via snippets, and integration with `flowbite-svelte-icons` for a visually rich navigation experience.

```Svelte
<script lang="ts">
  import { Sidebar, SidebarGroup, SidebarItem, SidebarButton, uiHelpers } from "flowbite-svelte";
  import { ChartOutline, GridSolid, MailBoxSolid, UserSolid } from "flowbite-svelte-icons";
  import { page } from "$app/state";
  let activeUrl = $state(page.url.pathname);
  import PlusPlaceholder from "../../utils/PlusPlaceholder.svelte";
  const spanClass = "flex-1 ms-3 whitespace-nowrap";
  const demoSidebarUi = uiHelpers();
  let isDemoOpen = $state(false);
  const closeDemoSidebar = demoSidebarUi.close;
  $effect(() => {
    isDemoOpen = demoSidebarUi.isOpen;
    activeUrl = page.url.pathname;
  });
</script>

<SidebarButton onclick={demoSidebarUi.toggle} class="mb-2" />
<div class="relative">
  <Sidebar {activeUrl} backdrop={false} isOpen={isDemoOpen} closeSidebar={closeDemoSidebar} params={{ x: -50, duration: 50 }} class="z-50 h-full" position="absolute" activeClass="p-2" nonActiveClass="p-2">
    <SidebarGroup>
      <SidebarItem label="Dashboard" href="/">
        {#snippet icon()}
          <ChartOutline class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
        {/snippet}
      </SidebarItem>
      <SidebarItem label="Kanban" {spanClass} href="/">
        {#snippet icon()}
          <GridSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
        {/snippet}
        {#snippet subtext()}
          <span class="ms-3 inline-flex items-center justify-center rounded-full bg-gray-200 px-2 text-sm font-medium text-gray-800 dark:bg-gray-700 dark:text-gray-300">Pro</span>
        {/snippet}
      </SidebarItem>
      <SidebarItem label="Inbox" {spanClass} href="/">
        {#snippet icon()}
          <MailBoxSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
        {/snippet}
        {#snippet subtext()}
          <span class="bg-primary-200 text-primary-600 dark:bg-primary-900 dark:text-primary-200 ms-3 inline-flex h-3 w-3 items-center justify-center rounded-full p-3 text-sm font-medium">3</span>
        {/snippet}
      </SidebarItem>
      <SidebarItem label="Sidebar" href="/components/sidebar">
        {#snippet icon()}
          <UserSolid class="h-5 w-5 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white" />
        {/snippet}
      </SidebarItem>
    </SidebarGroup>
  </Sidebar>
  <div class="h-96 overflow-auto px-4 md:ml-64">
    <div class="rounded-lg border-2 border-dashed border-gray-200 p-4 dark:border-gray-700">
      <PlusPlaceholder colnum={3} rownum={1} />
      <PlusPlaceholder />
      <PlusPlaceholder colnum={2} rownum={2} />
      <PlusPlaceholder />
      <PlusPlaceholder colnum={2} rownum={2} />
    </div>
  </div>
</div>
```

--------------------------------

### Display Application Preview in Desktop Mockup (Svelte)

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/device-mockups

This Svelte code snippet demonstrates how to use the `DeviceMockup` component from `flowbite-svelte` to display an application preview within a desktop device frame. It includes both light and dark mode image examples for responsive display.

```Svelte
<script>
  import { DeviceMockup } from "flowbite-svelte";
</script>

<DeviceMockup device="desktop">
  <img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac.png" class="h-[140px] w-full rounded-xl md:h-[262px] dark:hidden" alt="desktop example 1" />
  <img src="https://flowbite.s3.amazonaws.com/docs/device-mockups/screen-image-imac-dark.png" class="hidden h-[140px] w-full rounded-xl md:h-[262px] dark:block" alt="desktop example 2" />
</DeviceMockup>
```

--------------------------------

### Install Flowbite Svelte Datatable Plugin

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/plugins/datatables

This snippet demonstrates how to install the Flowbite Svelte datatable plugin using pnpm, a fast package manager. This is the first step to integrate the datatable functionality into a Svelte project.

```pnpm
pnpm i -D @flowbite-svelte-plugins/datatable
```

--------------------------------

### Create Masonry Grid Layout with Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/gallery

This example demonstrates how to implement a four-column masonry grid layout using the `Gallery` component from `flowbite-svelte`. It initializes four separate arrays of image data and renders them within a responsive grid, suitable for displaying multiple image sets in a dynamic layout.

```Svelte
<script>
  import { Gallery } from "flowbite-svelte";
  const images1 = [
    { alt: "erbology", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg" },
    { alt: "shoes", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg" },
    { alt: "small bag", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg" }
  ];
  const images2 = [
    { alt: "plants", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg" },
    { alt: "watch", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg" },
    { alt: "shoe", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg" }
  ];
  const images3 = [
    { alt: "cream", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg" },
    { alt: "small bag", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg" },
    { alt: "lamp", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg" }
  ];
  const images4 = [
    { alt: "toiletbag", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg" },
    { alt: "playstation", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg" },
    { alt: "bag", src: "https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg" }
  ];
</script>

<Gallery class="grid-cols-2 gap-4 md:grid-cols-4">
  <Gallery items={images1} />
  <Gallery items={images2} />
  <Gallery items={images3} />
  <Gallery items={images4} />
</Gallery>
```

--------------------------------

### Conventional Commit Message Examples

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/how-to-contribute

Examples of conventional commit messages used in the Flowbite Svelte project. These follow the Conventional Commits specification, categorizing changes like features, fixes, chores, documentation, style, and tests. A '!' indicates a breaking change, leading to a minor version bump.

```Shell
feat: add rating component
fix: add if statement to Button component
chore: clean up About page
docs: add timeline page
style: update home page
test: add modal test
```

```Shell
feat!: add drawer component and page
```

```Shell
git commit -a "feat: change btnClass name to bClass" -m "BREAKING CHANGE: change the Button component attributes"
```

--------------------------------

### Implement Simple Previous/Next Buttons with PaginationItem in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/pagination

This Svelte example illustrates how to use individual `PaginationItem` components to create simple 'Previous' and 'Next' buttons. It demonstrates attaching `onclick` handlers to these items and shows examples for both default and large sizes, providing basic navigation controls.

```Svelte
<script>
  import { Pagination, PaginationItem } from "flowbite-svelte";
  const previous = () => {
    alert("Previous btn clicked. Make a call to your server to fetch data.");
  };
  const next = () => {
    alert("Next btn clicked. Make a call to your server to fetch data.");
  };
</script>

<div class="flex space-x-3 rtl:space-x-reverse">
  <PaginationItem onclick={previous}>Previous</PaginationItem>
  <PaginationItem onclick={next}>Next</PaginationItem>
</div>
<div class="flex space-x-3 rtl:space-x-reverse">
  <PaginationItem size="large" onclick={previous}>Previous</PaginationItem>
  <PaginationItem size="large" onclick={next}>Next</PaginationItem>
</div>
```

--------------------------------

### Importing Flowbite Svelte Sidebar Components

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/sidebar

This snippet demonstrates how to import the necessary components from the `flowbite-svelte` library to set up a sidebar. It includes imports for the main `Sidebar` component and various sub-components like `SidebarBrand`, `SidebarItem`, and `SidebarDropdownItem`, which are essential for building a complete sidebar navigation.

```Svelte
<script>
  import { Sidebar, SidebarBrand, SidebarCta, SidebarDropdownItem, SidebarDropdownWrapper, SidebarGroup, SidebarItem, SidebarWrapper } from "flowbite-svelte";
</script>
```

--------------------------------

### Svelte Tags Component Example with Form Binding

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/extend/tags

This example demonstrates a practical implementation of the `Tags` component within a Svelte form. It shows how to bind the component's value to a reactive array (`tags`), display the JSON representation of the entered tags, and handle form submission with a button click.

```Svelte
<script lang="ts">
  import { Button, Tags } from "flowbite-svelte";
  let tags: string[] = $state([]);
  const handleClick = () => {
    alert(`Submitted: ${tags}`);
  };
</script>

<form>
  <Tags class="mt-5 mb-3" bind:value={tags} />
  {#if tags.length > 0}
    <pre>{JSON.stringify(tags, null, 2)}</pre>
  {/if}
  <Button onclick={handleClick}>Submit</Button>
</form>
```

--------------------------------

### Configure Tailwind CSS and Flowbite Plugin in CSS

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/quickstart

This CSS configuration block, typically placed in `src/app.css` for SvelteKit, imports Tailwind CSS, enables the Flowbite plugin, defines custom dark mode variants, and sets up custom primary and secondary color palettes for theme customization. It also includes source paths for Flowbite Svelte components and icons.

```css
@import "tailwindcss";

@plugin 'flowbite/plugin';

@custom-variant dark (&:where(.dark, .dark *));

@theme {
  --color-primary-50: #fff5f2;
  --color-primary-100: #fff1ee;
  --color-primary-200: #ffe4de;
  --color-primary-300: #ffd5cc;
  --color-primary-400: #ffbcad;
  --color-primary-500: #fe795d;
  --color-primary-600: #ef562f;
  --color-primary-700: #eb4f27;
  --color-primary-800: #cc4522;
  --color-primary-900: #a5371b;

  --color-secondary-50: #f0f9ff;
  --color-secondary-100: #e0f2fe;
  --color-secondary-200: #bae6fd;
  --color-secondary-300: #7dd3fc;
  --color-secondary-400: #38bdf8;
  --color-secondary-500: #0ea5e9;
  --color-secondary-600: #0284c7;
  --color-secondary-700: #0369a1;
  --color-secondary-800: #075985;
  --color-secondary-900: #0c4a6e;
}

@source "../node_modules/flowbite-svelte/dist";
@source "../node_modules/flowbite-svelte-icons/dist";

@layer base {
  /* disable chrome cancel button */
  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }
}
```

--------------------------------

### Build a Pricing Plan Card in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/card

This example illustrates how to construct a pricing card using Flowbite Svelte's `Card` and `Button` components, along with icons. It details how to display pricing, features (including available and unavailable ones), and a call-to-action button.

```Svelte
<script>
  import { Card, Button } from "flowbite-svelte";
  import { CheckCircleSolid } from "flowbite-svelte-icons";
</script>

<Card class="p-4 sm:p-8 md:p-10">
  <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Standard plan</h5>
  <div class="flex items-baseline text-gray-900 dark:text-white">
    <span class="text-3xl font-semibold">$</span>
    <span class="text-5xl font-extrabold tracking-tight">49</span>
    <span class="ms-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month</span>
  </div>
  <!-- List -->
  <ul class="my-7 space-y-4">
    <li class="flex space-x-2 rtl:space-x-reverse">
      <CheckCircleSolid class="text-primary-600 dark:text-primary-500 h-4 w-4" />
      <span class="text-base leading-tight font-normal text-gray-500 dark:text-gray-400">2 team members</span>
    </li>
    <li class="flex space-x-2 rtl:space-x-reverse">
      <CheckCircleSolid class="text-primary-600 dark:text-primary-500 h-4 w-4" />
      <span class="text-base leading-tight font-normal text-gray-500 dark:text-gray-400">20GB Cloud storage</span>
    </li>
    <li class="flex space-x-2 rtl:space-x-reverse">
      <CheckCircleSolid class="text-primary-600 dark:text-primary-500 h-4 w-4" />
      <span class="text-base leading-tight font-normal text-gray-500 dark:text-gray-400">Integration help</span>
    </li>
    <li class="flex space-x-2 line-through decoration-gray-500 rtl:space-x-reverse">
      <CheckCircleSolid class="h-4 w-4 text-gray-400 dark:text-gray-500" />
      <span class="text-base leading-tight font-normal text-gray-500">Sketch Files</span>
    </li>
    <li class="flex space-x-2 line-through decoration-gray-500 rtl:space-x-reverse">
      <CheckCircleSolid class="h-4 w-4 text-gray-400 dark:text-gray-500" />
      <span class="text-base leading-tight font-normal text-gray-500">API Access</span>
    </li>
    <li class="flex space-x-2 line-through decoration-gray-500 rtl:space-x-reverse">
      <CheckCircleSolid class="h-4 w-4 text-gray-400 dark:text-gray-500" />
      <span class="text-base leading-tight font-normal text-gray-500">Complete documentation</span>
    </li>
    <li class="flex space-x-2 line-through decoration-gray-500 rtl:space-x-reverse">
      <CheckCircleSolid class="h-4 w-4 text-gray-400 dark:text-gray-500" />
      <span class="text-base leading-tight font-normal text-gray-500">24×7 phone & email support</span>
    </li>
  </ul>
  <Button class="w-full">Choose plan</Button>
</Card>
```

--------------------------------

### Adjusting Input Sizes in Flowbite Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/forms

This Svelte example demonstrates how to control the size of the `Input` component using the `size` prop. It shows examples for large (`lg`), default (`md`), and small (`sm`) input fields, utilizing `Label` and `Input` components from `flowbite-svelte` to create varied input appearances.

```Svelte
<script>
  import { Label, Input } from "flowbite-svelte";
</script>

<div class="mb-6">
  <Label for="large-input" class="mb-2 block">Large input</Label>
  <Input id="large-input" size="lg" placeholder="Large input" />
</div>
<div class="mb-6">
  <Label for="default-input" class="mb-2 block">Default input</Label>
  <Input id="default-input" placeholder="Default input" />
</div>
<div class="mb-6">
  <Label for="small-input" class="mb-2 block">Small input</Label>
  <Input id="small-input" size="sm" placeholder="Small input" />
</div>
```

--------------------------------

### Import Flowbite Svelte Pagination Components

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/pagination

This snippet demonstrates how to import the necessary pagination components (`PaginationNav`, `Pagination`, `PaginationItem`) from the `flowbite-svelte` library into a Svelte component. This is the initial setup required before using any pagination features.

```Svelte
<script>
  import { PaginationNav, Pagination, PaginationItem } from "flowbite-svelte";
</script>
```

--------------------------------

### Implement Default Flowbite Svelte Rating with Stars

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/rating

This example shows how to use the `Rating` component with default star icons. It demonstrates setting the `total` number of stars, the `size` of the stars, and the `rating` value. It also includes an example of customizing the star icon's fill and stroke colors using a wrapper function for advanced styling.

```Svelte
<script lang="ts">
  import { Rating, Star, type RatingIconProps } from "flowbite-svelte";
  const wrapper = (props: RatingIconProps) => (anchor: any, _props: RatingIconProps) => Star(anchor, { ..._props, ...props });
</script>

<Rating id="example-1" total={5} size={50} rating={1.4} />
<Rating id="example-1b" total={5} size={50} rating={4.66} />
<Rating id="example-1b" icon={wrapper({ fillColor: "#008800", strokeColor: "#008800" })} total={5} size={50} rating={4.66} />
```

--------------------------------

### Setup Flowbite Svelte Toast Component

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/components/toast

This snippet demonstrates the basic import statement required to use the Toast component from the Flowbite Svelte library in a Svelte application. It's the foundational step before utilizing any toast functionalities.

```Svelte
<script>
  import { Toast } from "flowbite-svelte";
</script>
```

--------------------------------

### Flowbite Svelte Component Usage Example in Svelte

Source: https://flowbite-svelte.com/docs/plugins/wysiwyg/pages/colors

This Svelte code example showcases the integration and usage of various Flowbite Svelte components such as Button, Alert, Card, Navbar, NavBrand, NavLi, NavUl, NavHamburger, and Toast. It demonstrates how to import components and icons, pass props like `color` and `href`, and structure UI elements within a Svelte application, including a slot for custom icon content.

```Svelte
<script>
  import { Button, Alert, Card, Navbar, NavBrand, NavLi, NavUl, NavHamburger, Toast } from "flowbite-svelte";
  import { FireOutline } from "flowbite-svelte-icons";
</script>

<Button color="primary">Primary</Button>
<Alert color="secondary">Secondary</Alert>
<Card href="/cards" color="cyan" class="p-4 sm:p-6">
  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-red-800">Noteworthy technology acquisitions 2021</h5>
  <p class="leading-tight font-normal text-gray-700 dark:text-gray-700">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</Card>
<Navbar color="amber">
  <NavBrand href="/">
    <img src="/images/flowbite-svelte-icon-logo.svg" class="me-3 h-6 sm:h-9" alt="Flowbite Logo" />
    <span class="self-center text-xl font-semibold whitespace-nowrap dark:text-red-800">Flowbite</span>
  </NavBrand>
  <NavHamburger />
  <NavUl>
    <NavLi href="/" active={true}>Home</NavLi>
    <NavLi href="/about">About</NavLi>
    <NavLi href="/services">Services</NavLi>
    <NavLi href="/pricing">Pricing</NavLi>
    <NavLi href="/contact">Contact</NavLi>
  </NavUl>
</Navbar>
<Toast color="rose">
  {#snippet icon()}
    <FireOutline class="h-6 w-6" />
  {/snippet}
  Dismissable user notification.
</Toast>
```
Tokens:
Raw