DEV Community

Cover image for I built a "Vibe-Based" Notepad with Tauri v2 (It weighs 4MB)
Aditya Pandey
Aditya Pandey

Posted on

I built a "Vibe-Based" Notepad with Tauri v2 (It weighs 4MB)

#productivity #opensource #showdev #rust

Stop me if you've heard this one:
A developer gets tired of their tools, decides to build their own, accidentally creates a cult philosophy, and learns DevOps along the way.

Hi, I'm Aditya. Last weekend, I looked at my text editor and realized something: It has no soul.

VS Code is a cockpit. Notion is a project manager. Obsidian is a graph database.
Where is the app for just... bleeding onto the page?

So I built SummerPad.
It's an open-source, local-first "Mood Engine" for writers. And I built it using the Tauri v2 Super-Stack.
Here is how (and why) I did it.

🏗 The Stack (RIP Electron)

I wanted this app to launch instantly. If I have an idea at 3 AM, I can't wait for a 150MB Electron helper process to spin up.

Core: Tauri v2 (Rust backend).

UI: React + Vite.

Styling: Tailwind CSS.

Animations: Framer Motion (crucial for the "feel").

Build System: GitHub Actions (Cross-platform compilation).

The Result: A native Windows, Mac, and Linux app that weighs about 4MB.

🎨 The "Vibe Engine" Architecture

Most apps treat themes as "Light Mode" or "Dark Mode." Boring.
I wanted Realities.

In SummerPad, selecting a font doesn't just change the typeface; it changes the entire DOM state.

// The Vibe Configuration
const FONTS = [
  { 
    name: 'Playfair Display', 
    label: 'The Romantic', 
    colors: { bg: '#F2EBE3', text: '#4A4A4A' } // Warm Beige
  },
  { 
    name: 'JetBrains Mono', 
    label: 'The Hacker', 
    colors: { bg: '#09090b', text: '#22c55e' } // Terminal Green
  },
  { 
    name: 'Righteous', 
    label: 'The Cyberpunk', 
    colors: { bg: '#11001c', text: '#ff2a6d' }, 
    glow: true // <--- The Secret Sauce
  }
];
Enter fullscreen mode Exit fullscreen mode

When a user selects "The Cyberpunk," we don't just switch CSS variables. We inject a dynamic text-shadow property directly into the input components to create a neon burn-in effect:

const glowStyle = selectedFont.glow 
  ? { textShadow: `0 0 10px ${colors.text}, 0 0 20px ${colors.text}` } 
  : {};

<textarea style={{ ...glowStyle, color: colors.text }} />
Enter fullscreen mode Exit fullscreen mode

It’s simple, but it feels magical.

📸 The "Clout" Export (Solving the Screenshot Problem)

Writers love sharing snippets on Twitter/X, but OS screenshots look messy (UI clutter, cursors, bad cropping).

I built a rendering engine directly into the editor using html2canvas.

User clicks the Camera Icon.

React freezes the state.

We invisibly clone the DOM, strip out the UI (buttons/scrollbars), inject a watermark, and render it at 3x scale for crisp text.

We dump the Blob directly to the user's clipboard.

const handleExport = async () => {
  const canvas = await html2canvas(editorRef.current, {
    scale: 3, // Retina quality
    backgroundColor: currentTheme.bg,
    onclone: (doc) => {
      // Hack: Force height to auto to capture full text without scrollbars
      doc.querySelector('.editor').style.height = 'auto';
    }
  });

  // Direct to clipboard (No "Save As" dialog friction)
  canvas.toBlob(blob => navigator.clipboard.write([new ClipboardItem({'image/png': blob})]));
};
Enter fullscreen mode Exit fullscreen mode

🔮 What's Next?

SummerPad is 100% open source. I'm currently looking for contributors who want to help add:

Typewriter Sounds (Rust-based audio triggers on keypress).

Zen Mode (Fade out UI completely when typing).

📥 Try it out

You can download the binary for your OS here:
👉 Download SummerPad

Or check the code (and maybe give it a ⭐️?):
👉 GitHub Repository

Top comments (0)