Fabric Web App

A user-friendly web interface for Fabric built with Svelte, Skeleton UI, and Mdsvex.

Alt: Screenshot of the Fabric web app dashboard showing pattern inputs and outputs.

Table of Contents

• Fabric Web App
  • Table of Contents
  • Installation
  • Running the App
    • Prerequisites
    • Launch the Svelte App
  • Streamlit UI
    • Key Features
    • Setup and Run
  • Obsidian Integration
    • Quick Setup
  • Contributing

Installation

Note

Requires Node.js ≥18 and Fabric installed globally (fabric --version to check).

From the Fabric root directory:

Using npm:

./web/scripts/npm-install.sh

Or using pnpm (recommended for speed):

./web/scripts/pnpm-install.sh

These scripts install Svelte dependencies and patch PDF-to-Markdown libraries (e.g., pdfjs-dist, pdf-to-markdown). Link to scripts:npm-install.sh and pnpm-install.sh

Running the App

Prerequisites

Start Fabric's server in a separate terminal:

fabric --serve

(This exposes Fabric's API at http://localhost:8080)

Launch the Svelte App

In the web/ directory:

Using npm:

npm run dev

Or using pnpm:

pnpm run dev

Visit http://localhost:5173 (default port).

Tip

Sync Svelte types if needed: npx svelte-kit sync

Streamlit UI

For Python enthusiasts, this alternative UI excels at data visualization and chaining complex patterns. It supports clipboard ops across platforms (install pyperclip on Windows, xclip on Linux).

• macOS: Uses pbcopy and pbpaste (built-in)
• Windows: Uses pyperclip library (install with pip install pyperclip)
• Linux: Uses xclip (install with sudo apt-get install xclip or equivalent for your Linux distribution)

Key Features

• Run and edit patterns with real-time previews.
• Analyze outputs with charts (via Matplotlib/Seaborn).
• Export results to Markdown or CSV.

Setup and Run

From web/:

pip install -r requirements.txt #Or: pip install streamlit pandas matplotlib seaborn numpy python-dotenv pyperclip
streamlit run streamlit.py

Access at http://localhost:8501 (default port).

Obsidian Integration

Turn web/src/lib/content/ into an Obsidian vault for note-taking synced with Fabric patterns. It includes pre-configured .obsidian/ and templates/ folders.

Quick Setup

1. Open Obsidian: File > Open folder as vault > Select web/src/lib/content/
2. To publish posts, move them to the posts directory (web/src/lib/content/posts).
3. Use Fabric patterns to generate content directly in Markdown files.

Tip

When creating new posts, make sure to include a date (YYYY-MM-DD), description, tags (e.g., #ai #patterns), and aliases for SEO. Only a date is needed to display a note. Embed images (![alt](path)), link patterns ([[pattern-name]]), or code blocks for reusable snippets—all in standard Markdown.

Contributing

Refer to the Contributing Guide for details on how to improve this content.