Introducing PootleWriter: Your Friction-Free WordPress Writing Companion

Say goodbye to cumbersome writing tools and hello to PootleWriter – the revolutionary writing app that puts simplicity and speed at your fingertips.

Unlike AI-powered alternatives, PootleWriter is a human-designed solution that prioritizes your writing experience.

Key Features:

• No Login Required: Jump straight into writing without any barriers.
• Lightning-Fast: Get your thoughts down quickly and effortlessly.
• Distraction-Free Interface: Focus solely on your words, not complex technology.
• Markdown support: Automatic conversion to html when publishing.
• Publish to WordPress: One-click publishing to your WordPress website
• Post status toggle: Set posts as either Draft or Published
• Offline mode: PootleWriter works offline thanks to its local-first architecture.

PootleWriter isn’t about AI taking over your writing process. Instead, it’s a tool crafted to enhance your natural creativity. The technology fades into the background, allowing your ideas to flow freely onto the page.

Whether you’re a student racing against a deadline, a professional crafting important documents, or a creative soul exploring new ideas, PootleWriter adapts to your needs. It’s the writing companion that empowers you to produce your best work without getting in your way.

Experience the joy of friction-free writing with PootleWriter – where simplicity meets productivity, and your words take center stage.

Publishing from PootleWriter to WordPress

Linking PootleWriter to your WordPress website is very simple.

1. Go to Users / Profile in your WordPress website
2. Type ‘pootlewriter’ in the ‘New Application Password Name’ field
3. Copy the password that is created
4. Click on the settings icon in PootleWriter
5. Paste in your password
6. Type in your website address
7. Type in your username (of your WordPress website)
8. Click ‘Save Configuration’
9. Now you are ready to publish ❤️

Core Architecture

1. Frontend Stack
   • Built with React + TypeScript
   • Uses Vite as the build tool
   • Styled with Tailwind CSS
   • Icons from Lucide React
   • Custom serif fonts (Lora for headings, Libre Baskerville for body text)
2. State Management
   • Uses React’s built-in useState and useEffect hooks
   • Local storage for data persistence
   • No external state management library needed due to the app’s scope

Key Features

1. Post Management
   • CRUD operations for posts
   • Automatic saving to localStorage
   • Unique ID generation using crypto.randomUUID()
   • Last modified timestamp tracking
2. Editor Component
   • Rich text editing capabilities
   • Unsaved changes detection
   • Custom Enter key handling for better writing experience
   • Confetti animation on save
   • Beforeunload warning for unsaved changes
3. WordPress Integration
   • Basic authentication support
   • Create/Update posts via WordPress REST API
   • Configuration persistence in localStorage
   • Connection testing functionality
   • Published status tracking
4. Theme System
   • Light/dark mode support
   • Theme persistence in localStorage
   • Smooth transitions between themes
   • System preference detection (defaulting to dark)

Data Flow

1. Post Storage
   • Posts are stored in localStorage under ‘writing-app-posts’
   • Loaded on application start
   • Automatically saved on any changes
2. WordPress Publishing
   • Two-way sync with WordPress
   • Maintains WordPress post IDs for updates
   • Handles both new posts and updates
   • Error handling for failed publications
3. UI State Management
   • Toggle between list and editor views
   • Current post tracking
   • Unsaved changes detection

Security Features

1. WordPress Authentication
   • Auth using application passwords
   • Connection testing before saving credentials
2. Data Safety
   • Unsaved changes warnings
   • Confirmation dialogs for destructive actions
   • Automatic saving to localStorage

1. Encryption: Added AES-GCM encryption for WordPress credentials using the Web Crypto API
2. Secure Storage: Credentials are encrypted before being stored in localStorage
3. Error Handling: Proper error handling for encryption/decryption operations
4. Async Operations: WordPress configuration handling to work with async encryption

The credentials are encrypted using AES-GCM encryption before being stored in localStorage.

WordPress Application Passwords and their security benefits in PootleWriter

WordPress Application Passwords are a secure authentication method specifically designed for external applications like PootleWriter. Unlike your main WordPress login credentials, these are special purpose-specific passwords that provide limited access to your WordPress site through the API.

When you create an Application Password in WordPress, you can:

• Set specific permissions for what the password can access
• Generate multiple passwords for different applications
• Easily revoke access without changing your main password
• Track which application is using which password

In PootleWriter, we take security seriously. Your Application Password is encrypted using AES-GCM encryption before being stored locally in your browser. This means:

1. Your credentials never touch our servers
2. The data is encrypted at rest in your browser
3. Only your browser can decrypt and use the credentials
4. You can revoke access at any time from your WordPress dashboard

This approach provides a secure way to connect PootleWriter to your WordPress site while maintaining strong security practices and giving you full control over the access permissions.

Performance Considerations

1. Optimizations
   • Lazy loading of components
   • Efficient localStorage operations
   • Smooth transitions and animations
   • Minimal re-renders through proper state management
2. Progressive Enhancement
   • Works offline (except WordPress features)
   • Responsive design
   • Keyboard shortcuts and accessibility

This architecture provides a solid foundation for a writing application with WordPress integration, focusing on user experience and data safety while maintaining simplicity in implementation.

Markdown support

PootleWriter now allows you to write your content using Markdown syntax directly within the app. This means you can focus on your writing while using simple, intuitive formatting that doesn’t interrupt your flow. Here are some key benefits of this new feature:

• Efficiency: Quickly format your text without taking your hands off the keyboard.
• Portability: Your Markdown documents can be easily opened and edited in any text editor.
• Readability: Markdown syntax is designed to be as readable as possible, even in its raw form.

Works offline

PootleWriter works offline thanks to its local-first architecture.

Here are the key components that enable offline functionality:

1. Local Storage for Posts:

// src/utils/storage.ts handles all post data locally
export const savePosts = (posts: Post[]) => {
  localStorage.setItem('writing-app-posts', JSON.stringify(posts));
};

export const loadPosts = (): Post[] => {
  const posts = localStorage.getItem('writing-app-posts');
  return posts ? JSON.parse(posts) : [];
};

2. Local Theme Persistence:

// src/utils/theme.ts stores theme preference locally
export const saveTheme = (theme: Theme) => {
  localStorage.setItem(THEME_KEY, theme);
};

3. Encrypted WordPress Credentials:

// src/utils/wordpress.ts stores encrypted WordPress config locally
export const saveWordPressConfig = async (config: WordPressConfig) => {
  const encryptedConfig = await encryptData(config);
  localStorage.setItem(STORAGE_KEY, encryptedConfig);
};

The app only requires an internet connection when:

• Publishing posts to WordPress
• Testing WordPress credentials

Everything else – writing, editing, saving posts, and managing themes – works completely offline because the data is stored in your browser’s localStorage. This makes PootleWriter reliable and usable even without an internet connection.