Skip to main content Skip to navigation

Documentation

Everything you need to build irresistible applications

Quick Start Guide

Build your first application with Irresistible in under 5 minutes.

1. Create a New Project

Let’s create a simple task management app to demonstrate Irresistible’s capabilities.

# Create the project
irresistible create task-manager --template minimal

# Navigate to the project
cd task-manager

# Start the dev server
irresistible dev

Your app is now running at http://localhost:3000!

2. Understanding the Project Structure

task-manager/
├── src/
│   ├── routes/          # Page routes
│   ├── lib/             # Shared components & utilities
│   └── app.html         # HTML template
├── static/              # Static assets
├── .env                 # Environment variables
├── irresistible.config.js  # Project configuration
└── package.json         # Dependencies

3. Using the AI Assistant

Open your project in the Irresistible builder or your preferred editor. Let’s add some features using AI.

Add a Task Component

In the AI chat, type:

Create a TaskItem component that displays a task with a checkbox, 
title, and delete button. Use modern styling.

The AI will generate:

<!-- src/lib/components/TaskItem.svelte -->
<script lang="ts">export let task;
export let onToggle;
export let onDelete;
</script>

<div class="task-item {task.completed ? 'completed' : ''}">
  <input
    type="checkbox"
    checked={task.completed}
    on:change={() => onToggle(task.id)}
  />
  <span class="title">{task.title}</span>
  <button class="delete-btn" on:click={() => onDelete(task.id)}>
    <i class="i-carbon-trash-can"></i>
  </button>
</div>

<style>
  .task-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: var(--color-surface);
    border-radius: 0.5rem;
    transition: all 0.2s;
  }
  
  .task-item:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
  
  .completed .title {
    text-decoration: line-through;
    opacity: 0.6;
  }
  
  .delete-btn {
    margin-left: auto;
    padding: 0.5rem;
    background: transparent;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    transition: transform 0.2s;
  }
  
  .delete-btn:hover {
    transform: scale(1.1);
  }
</style>

Create the Main Page

Ask the AI:

Create a task manager page with add task functionality, 
task list, and local storage persistence

The AI generates:

<!-- src/routes/+page.svelte -->
<script lang="ts">import { onMount } from "svelte";
import TaskItem from "$lib/components/TaskItem.svelte";
let tasks = [];
let newTaskTitle = "";
onMount(() => {
  const stored = localStorage.getItem("tasks");
  if (stored) {
    tasks = JSON.parse(stored);
  }
});
$: if (typeof window !== "undefined") {
  localStorage.setItem("tasks", JSON.stringify(tasks));
}
function addTask() {
  if (!newTaskTitle.trim()) return;
  tasks = [...tasks, {
    id: Date.now().toString(),
    title: newTaskTitle,
    completed: false
  }];
  newTaskTitle = "";
}
function toggleTask(id) {
  tasks = tasks.map(
    (task) => task.id === id ? { ...task, completed: !task.completed } : task
  );
}
function deleteTask(id) {
  tasks = tasks.filter((task) => task.id !== id);
}
$: completedCount = tasks.filter((t) => t.completed).length;
$: totalCount = tasks.length;
</script>

<div class="container">
  <h1>Task Manager</h1>
  
  <form on:submit|preventDefault={addTask} class="add-task-form">
    <input
      type="text"
      bind:value={newTaskTitle}
      placeholder="Add a new task..."
      class="task-input"
    />
    <button type="submit" class="add-btn">
      <i class="i-carbon-add"></i>
      Add Task
    </button>
  </form>
  
  <div class="stats">
    {completedCount} of {totalCount} tasks completed
  </div>
  
  <div class="task-list">
    {#each tasks as task (task.id)}
      <TaskItem
        {task}
        onToggle={toggleTask}
        onDelete={deleteTask}
      />
    {/each}
    
    {#if tasks.length === 0}
      <p class="empty-state">
        No tasks yet. Add one above to get started!
      </p>
    {/if}
  </div>
</div>

<style>
  .container {
    max-width: 600px;
    margin: 2rem auto;
    padding: 2rem;
  }
  
  h1 {
    font-size: 2.5rem;
    margin-bottom: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .add-task-form {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  .task-input {
    flex: 1;
    padding: 1rem;
    border: 2px solid var(--color-border);
    border-radius: 0.5rem;
    font-size: 1rem;
    background: var(--color-surface);
    color: var(--color-text);
  }
  
  .add-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
  }
  
  .add-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
  }
  
  .stats {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 2rem;
  }
  
  .task-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  
  .empty-state {
    text-align: center;
    color: var(--color-text-muted);
    padding: 3rem;
    background: var(--color-surface);
    border-radius: 0.5rem;
    border: 2px dashed var(--color-border);
  }
</style>

4. Deploy Your App

When you’re ready to share your app with the world:

# Build for production
irresistible build

# Deploy to Irresistible cloud
irresistible deploy

Your app will be deployed to:

  • https://task-manager.irresistible.app
  • Or your custom domain if configured

5. Next Steps

Add More Features

Try these AI prompts to enhance your app:

  1. Add Categories: “Add a category system to organize tasks”
  2. Due Dates: “Add due date functionality with date picker”
  3. Search: “Add search functionality to filter tasks”
  4. Dark Mode: “Add a dark mode toggle”

Learn More

Tips

  1. Use AI Effectively: Be specific in your prompts
  2. Iterate Quickly: Test changes in real-time
  3. Version Control: Commit often with Git
  4. Collaborate: Invite team members to your project

Congratulations! 🎉

You’ve just built and deployed your first Irresistible app. The possibilities are endless from here!

What’s Next?