Techtales.

Overview

TechTales uses a rich-text editor (TinyMCE) with custom plugins to make writing and publishing blog posts effortless. Every post has 5 main parts: Title, Cover Image, Body, Tags, and Settings. This guide will walk you through each step to help you create compelling content.

Written by The Techtales Team

5 min read

Step 1: Writing Your Title

Your title is the first thing readers see — make it count.

Title Rules:

  • 20–80 characters in length
  • Clear and compelling — grab your reader's attention
  • Use keywords naturally for better discoverability

A character counter is visible while you type, showing X/80 to help you stay within the optimal range.

Pro Tip

When you first click the title field, TechTales shows you a writing tip banner with guidance on crafting great titles.

Step 2: Adding a Cover Image

A strong cover image significantly increases engagement and social shares.

Image Requirements:

Aspect Ratio

16:9

Min Resolution

1280×720px

Max File Size

5MB

Formats

JPEG, PNG, WebP, AVIF

Image Cropping

If your image doesn't match the 16:9 aspect ratio, TechTales will open a built-in image cropper so you can adjust it before uploading.

Performance Tip

We recommend using TinyPNG to compress your images before uploading. It reduces file size significantly with no visible quality loss.

Step 3: Writing the Body

The TinyMCE editor comes packed with powerful features to enhance your writing experience. In the editor, click Alt+0 for help or click on help tab to see all available shortcuts. You can also learn more on how to use TinyMCE editor in their official page: TinyMCE docs

Editor Features

AI Assistant

Click Tools → AI or use the toolbar AI button to generate or improve content with AI.

Table of Contents

Auto-generates a TOC from your headings to help readers navigate long posts.

</>Code Sample

Syntax-highlighted code blocks with language selector (uses Prism.js). Use the Monaco Editor to add code blocks in the different languages provided

Word/Doc Import

Import a .docx file directly into the editor via the toolbar.

Image Upload

Drag and drop or use file picker; images are uploaded to Cloudinary.

Tables, Media Embeds, Accordions, Checklists

All available in the toolbar for rich content creation.

Keyboard Shortcuts

  • Alt+0— Help menu
  • Ctrl+S— Save draft
  • Ctrl+Shift+F— Focus mode

Auto-Save

The editor auto-saves to localStorage. A green pulsing dot in the top bar indicates auto-saving is active.

Step 4: Adding Tags

Tags help readers discover your post through search and category browsing.

Tag Rules

  • Maximum 4 tags per post
  • Maximum 15 characters per tag
  • Press Enter or , to add a tag
  • Click a tag to edit it, X to remove
  • Press Backspace when input is empty to remove the last tag

AI Tag Generation

Click the ✨ wand icon next to Tags to auto-generate up to 4 relevant tags based on your blog title. You must have a title set first.

Step 5: Post Settings

Click the Settings button in the navbar to open the Settings modal.

Available Settings

Comments

Choose Everyone or No one (disable comments)

Audio Voiceover

Paste a direct link to an audio file (MP3, WAV, OGG, M4A). A preview player appears to verify the link.

SEO Description

Optional meta description. Recommended 150–160 characters. A color indicator shows:

Too shortIdeal lengthToo long

The blog description will be auto-generated if left blank.

Publishing Your Post

The top navbar provides several actions to manage your post.

Navbar Actions

Sync Draft

Saves current draft to the database (only available for DRAFT posts).

Update

Updates a previously published post with your latest changes.

Publish

Publishes the post (disabled until all required fields are filled).

Preview

Opens a preview dialog showing mobile and desktop views side-by-side with a simulated browser/phone frame.

Focus Mode

Hides distractions for distraction-free writing (Ctrl+Shift+F).

Delete/Archive

Deletes DRAFT posts, archives PUBLISHED posts.

Tips & Best Practices

Follow these guidelines to get the most reach and engagement from your posts.

Write for Your Audience

Know who you're writing for and tailor your content to their interests and needs.

Use Keywords Naturally

Incorporate relevant keywords in your title and body for better SEO without keyword stuffing.

Always Add a Cover Image

Posts with images get significantly more engagement and social shares.

Use All 4 Tag Slots

Maximize discoverability by using all available tag slots for better categorization.

Preview in Mobile View

Always check mobile preview before publishing — most readers are on mobile devices.

Use the AI Assistant

Overcome writer's block with AI-powered content generation and improvement suggestions.

Ready to Start Writing?

Put these tips into practice and create your first blog post on TechTales.