Svelte Playground

Save

Publish

App.svelte

<script>
  import { fly, fade } from 'svelte/transition'
  import { quintOut } from 'svelte/easing'
  
  // State
  let notes = [
    { id: 1, title: 'Project Ideas', content: 'Build a weather app with Svelte', color: 'violet' },
    { id: 2, title: 'Meeting Notes', content: 'Discuss Q1 roadmap with team', color: 'fuchsia' },
    { id: 3, title: 'Shopping List', content: 'Milk, eggs, bread, coffee', color: 'cyan' },
  ]
  
  let newTitle = ''
  let newContent = ''
  let selectedColor = 'violet'
  let showForm = false
  
  const colors = ['violet', 'fuchsia', 'cyan', 'emerald', 'amber']
  
  // Functions
  function addNote() {
    if (!newTitle.trim()) return
    
    notes = [...notes, {
      id: Date.now(),
      title: newTitle,
      content: newContent,
      color: selectedColor
    }]
    
    newTitle = ''
    newContent = ''

Web View

Console

Grok 4.1 Fast Reasoning

Grok 4.1 Fast Non-Reasoning

Grok Code Fast 1

Gemini Flash (Latest)

Claude Haiku 4.5

GPT-5.1 Codex Mini

Claude Sonnet 4.5

GPT-5.1 Codex Max

GPT-5.1 Codex

Gemini 3 Pro

Claude Opus 4.5

GPT-5.2