DEV Community: Senthil Pitchappan V

I built a full Markdown IDE using Claude Opus 4. Live preview, AI assistant (BYOM), diagrams, workspaces all client-side, zero backend. No signup. No subscriptions. Just open and write. Try it now - https://v-senthil.github.io/mark-viwer/

Senthil Pitchappan V — Sat, 21 Feb 2026 09:15:11 +0000

Senthil Pitchappan V

Feb 21

I Got Tired of Tab Hell Just to Write Documentation - So I Built This

#opensource #markdown #ai #webdev

Comments

4 min read

v-senthil.github.io

I Got Tired of Tab Hell Just to Write Documentation - So I Built This

Senthil Pitchappan V — Sat, 21 Feb 2026 08:43:30 +0000

The problem isn't Markdown. It's everything around Markdown.

You open VS Code to write a README. Then you need an AI assistant - new tab. Grammar check - another tab. You want a Mermaid diagram - different tool. Need a quick preview? Open another window. Managing multiple docs? Now you're juggling files across three apps.

By the time you start writing, you've already lost 10 minutes and half your focus.

I got tired of this. So I built Mark Viewer.

What Is Mark Viewer?

Mark Viewer is a zero-install, zero-backend Markdown IDE that runs entirely in your browser. One URL. No signup. No subscriptions. No server dependencies.

It's also available as a native desktop app via Tauri - 18MB, not the 300MB Electron tax.

It combines everything you need for serious documentation work into one surface:

Full-featured editor
Live preview
AI assistant
Diagrams
File management
Analytics

No context switching. No tab hell.

The Feature Stack

⚡ Live Edit + Live Preview

The editor runs on CodeMirror 6 - the same engine powering modern code editors. Line numbers, bracket matching, multiple themes, Vim mode if you're that person.

The preview renders in real-time with full GitHub Flavored Markdown support:

Syntax highlighting for 180+ languages
Mermaid diagrams - flowcharts, sequence diagrams, ERDs
PlantUML - for architects who refuse to give up UML
KaTeX math - inline $x^2$ and display $$\int_0^1 f(x)dx$$
Footnotes, task lists, tables, emoji

No separate preview window. No manual refresh. What you type is what you see.

🤖 AI-Powered Assistant - Bring Your Own Model

This is where it gets interesting.

Mark Viewer doesn't lock you into one AI provider. You bring your own:

Provider	Models
OpenAI	GPT-4o, GPT-4 Turbo, GPT-3.5
Google	Gemini 2.0 Flash, 1.5 Pro
Ollama	Any local model (Llama, Mistral, etc.)
Custom	Any OpenAI-compatible endpoint

11 Quick Actions work on your current selection or full document:

Continue Writing - extend naturally, matching your tone
Summarize - condense key points
Fix Grammar - correct errors silently
Rewrite - improve clarity
Make Concise - cut the fluff
Simplify - reduce reading level
Expand - add depth
Generate Outline - structure from chaos
Explain - break down complex content
Translate - preserve Markdown formatting
Custom - your own prompt

The AI operates in context. No copy-pasting to ChatGPT. No losing your place. Select text → Run action → Insert or replace. Done.

Privacy note: Your API keys are AES-256 encrypted in IndexedDB. Zero telemetry. Your data never leaves your browser unless you explicitly call an AI provider.

🧭 Smart TOC & Navigation

Every document auto-generates a Table of Contents from headings. Click to jump.

The Command Palette (Ctrl/Cmd+P) gives you VS Code-style fuzzy search:

Search commands
Jump to in-document symbols (headings)
Open workspace files
Type :42 to jump to line 42

A reading progress indicator shows how far through the document you are - useful for long specs and guides.

📊 Analytics & Document Insights

For technical writers and anyone who cares about readability:

Flesch-Kincaid readability score
Vocabulary density analysis
Word count + reading time estimates
Section-by-section breakdown
Word goals for when you need to hit a target

Know exactly how readable your documentation is before you ship it.

📁 Workspace & File Management

This isn't a single-file editor. It's a proper workspace.

Multiple workspaces - switch between projects
Folder hierarchy - organize like a real file system
Tabbed editing - drag-to-reorder, unsaved indicators
File search - by name and content
Pin files - keep important docs at the top
Import/Export - backup workspaces as ZIP

All storage uses the Origin Private File System (OPFS) - a modern browser API that gives you real file system performance without a backend. Falls back to localStorage automatically if needed.

📦 PWA + Native Desktop

Mark Viewer works offline as a Progressive Web App. Install it from your browser and use it without internet.

Or grab the native desktop app:

Built with Tauri 2 (Rust, not Electron)
~18MB on macOS
Native file dialogs
Same full feature set as the web version

Who Is This For?

Developers → READMEs, API docs, ADRs, RFCs, technical specs. Live diagrams. Syntax highlighting. No friction.

Product Managers → PRDs, feature briefs, roadmaps. AI-assisted expansion and outlining. Readability scoring.

Technical Writers → Long-form documentation. Vocabulary analysis. Word goals. Multi-format mental model.

Teams exploring documentation-driven development → AI agents can interact with structured Markdown. Mark Viewer makes that workflow seamless.

The Technical Stack

Technology	Purpose
React 19	UI framework
Vite	Build tooling
Tailwind CSS 4	Styling
CodeMirror 6	Editor engine
marked.js	Markdown parsing
DOMPurify	HTML sanitization
highlight.js	Code highlighting
KaTeX	Math rendering
Mermaid.js	Diagrams
Tauri 2	Desktop app framework

Zero backend. Everything runs client-side. The architecture is designed for privacy and performance, not for collecting your data.

Why I Built This

I write a lot of documentation - for work, for open source, for my own projects. And I was frustrated.

Not with Markdown itself. Markdown is fine. The problem was everything around it:

Too many tools
Too much context switching
AI assistants that require copy-pasting
No good way to manage multiple docs
Preview tools that feel like afterthoughts

So I built the tool I wanted. One surface. Everything integrated. Fast. Private. Respectful of my time.

Try It

🔗 Live Demo: https://v-senthil.github.io/mark-viwer/

⭐ GitHub: https://github.com/v-senthil/mark-viwer/tree/main

Feedback Welcome

This is v1.0. There's more to build.

If you try it and something doesn't work, open an issue. If you have ideas, I want to hear them.

If you find it useful, star the repo - it helps other developers find it.

If you want to contribute, PRs are welcome. Let's make documentation less painful for everyone.

Built by a developer, for developers. No VC funding. No growth hacking. Just a tool that solves a real problem.

Automatic number-plate recognition in just 15 lines of code

Senthil Pitchappan V — Thu, 26 Aug 2021 07:18:22 +0000

Automatic number-plate recognition is a technology that uses optical character recognition on images to read vehicle registration plates.

Plate recognizer API
Python

Accurate, Fast, Developer- Friendly ALPR

Automatic License Plate Recognition software that works in all environments, optimized for your location. It supports a number of country number plates all over the world.
To see all the countries supported Click Here

To get API Key:

Go to platerecognizer and create an account to get your own API KEY.

Python

pip install json
pip install requests

Code

import requests
import json
from pprint import pprint

#Automatic number-plate recognition API
regions = ['in']            #Change to your country
with open('IMAGE_PATH', 'rb') as fp:
    response = requests.post(
        'https://api.platerecognizer.com/v1/plate-reader/',
        data=dict(regions=regions),
        files=dict(upload=fp),
        headers={'Authorization': 'Token YOUR_API_KEY'})
data = response.json()

#print output in JSON Format
pprint(data)

#get number plate value from JSON response
for plate in data['results']:
    plate_data = plate['plate']
print(plate_data)

View full project code on my Github

Dev.to API's which can be used to view posts on your web page / portfolio

Senthil Pitchappan V — Fri, 06 Aug 2021 05:35:51 +0000

Steps:

Create a API key from your dev.to account, here
Save your API key, in postman or .env file of your project.

Used this API in my portfolio, which works great. Do check it out.

API:

Your Published Article

curl --location --request GET 'https://dev.to/api/articles/me/published' \
--header 'api-key: API_KEY'

Your Unpublished Article

curl --location --request GET 'https://dev.to/api/articles/me/unpublished' \
--header 'api-key: API_KEY'

Update an Article

curl --location --request PUT 'https://dev.to/api/articles/{id}' \
-d '{
      "article": {
              "title": "Hello, World!",
              "published": true,
              "body_markdown": "Hello DEV, this is my first 
                   post",
              "tags": [
                  "discuss",
                  "help"
              ],
              "series": "Hello series"
              }
    }' \
--header 'api-key: API_KEY'

Create a new post

curl --location --request POST 
'https://dev.to/api/articles' \
-d '{
           "article": {
              "title": "Hello, World!",
              "published": true,
              "body_markdown": "Hello DEV, this is my first 
                    post",
              "tags": [
                  "discuss",
                  "help"
               ],
               "series": "Hello series"
              }
    }' \
--header 'api-key: API_KEY'

List of followers

curl --location --request GET 'https://dev.to/api/followers/users' \
--header 'api-key: API_KEY'

List of tags you follow

curl --location --request GET 'https://dev.to/api/follows/tags' \
--header 'api-key: API_KEY'

Get your Profile Photo

curl --location --request GET 'https://dev.to/api/profile_images/{user_name}' \
--header 'api-key: API_KEY'

Viber API

Senthil Pitchappan V — Sat, 24 Jul 2021 06:36:51 +0000

Steps

Login to your account using your mobile number Link
Create a bot account
After which, you will get a Private Token
Go to your Viber on your mobile (the account where you created the bot)
Verify your mail ID and have a profile picture in your account.
More -> Settings -> My Bots -> Select your bot which you created -> Click publish.
More -> Settings -> My Bots -> Select your bot which you created -> Message -> Select Viber Chat API.
Set Webhook Link

curl --location --request POST 'https://chatapi.viber.com/pa/set_webhook' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "url":"WEBHOOK_URL"
}'

Only when you set a webhook link, your bot will get activated.

Points to Note:

Only when a user sends message to a bot, you will be able to reply.
You can send message to a user only using user's id (not using user's mobile number)

Changes you should make

VIBER_ACCESS_TOKEN - From Viber Admin Panel
USER'S ID - Received From Webhook

Send Text Message

curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"text",
   "text":"Hello"
}'

Send Picture

curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"picture",
   "text":"Photo description",
   "media":"http://www.images.com/img.jpg",
   "thumbnail":"http://www.images.com/thumb.jpg"
}'

Send Video

curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"video",
   "media":"http://www.images.com/video.mp4",
   "thumbnail":"http://www.images.com/thumb.jpg",
   "size":10000
}'

Send File

curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"file",
   "media":"http://www.images.com/file.doc",
   "size":10000,
   "file_name":"name_of_file.doc"
}'

Send Contact

curl --location --request POST 'https://chatapi.viber.com/pa/send_message' \
--header 'X-Viber-Auth-Token: VIBER_ACCESS_TOKEN' \
--header 'Content-Type: application/json' \
--data-raw '{
   "receiver":"USERS_ID",
   "type":"contact",
   "contact":{
      "name":"Itamar",
      "phone_number":"+91965XXXXXX"
   }
}'

WEATHER API IN 6 LINES OF CODE

Senthil Pitchappan V — Fri, 23 Jul 2021 11:18:49 +0000

This can be used in any application with minimum lines of code. I guess this is the best Weather API you will find on the internet. Easy to use and Opensource.

To get API Key

Go to Open Weather
Sign in / Sign up to your account
Go to API Key Page
Give your API Key a name, and click generate.

import requests
api_address='http://api.openweathermap.org/data/2.5/weather?appid=YOUR_API_KEY&q='
city = input('City Name :')
url = api_address + city
json_data = requests.get(url).json()
print(json_data)

formatted_data = json_data['weather'][0]['main']
print(formatted_data)

HOW PROGRAMMING LANGUAGE CHANGE HOW YOU THINK!

Senthil Pitchappan V — Fri, 23 Jul 2021 10:59:14 +0000

It’s said that learning a new language can change the way you think, by giving you a new perspective on the world. An even bigger influence is generational. Programming languages, particularly programming languages taught in school, tend to be taught in waves. It usually starts with C programming or C++ programming. Schools go with the program they teach you not much with the concepts. They do teach you basic concepts like looping, conditions, etc. But that's only 20% of the programming.

The 2016 film Arrival is a science fiction drama movie starring Amy Adams and Jeremy Renner. The key focus of Arrival is language and specifically how language impacts the way we form thoughts and even perceive reality. There’s a beautiful sequence roughly 55 minutes into the film where they discuss the alien language and its problems at length and it includes this quote from one of our main scientists:

“If you immerse yourself into a foreign language then you can actually rewire your brain”

While I enjoyed the film and its concepts, it got me thinking about programming and how different programming languages might alter the way we think about application development.

During my engineering, I started with C programming and moved to python during my 3rd semester. I started working on mini projects using Arduino and raspberry pi. Arduino uses embedded C and raspberry pi uses python.

When I went all into the part of programming and hardware, I wanted to solve all the problems which I encountered using python only. It just changed the way I think. Even now, for a simple problem, I will always think for a logic behind it and start working on it. Start working on projects rather than studying the logic or concepts on a language. Basic concepts are very important, but they can be improvised only when you start working on some projects and implement them.

The concepts you learn in different programming languages will help you think differently in various situations. When you write a piece of code, it should encorage you to finish the code how much ever time it takes.

Programming languages definitely changes how you think and how you make decision in your life. Ultimately, any good computer language should change the way you think. So, started working on any programming language of your choice. Look into problems you encounter or others get, and started working on a solution for it. Each and every problem will have its solution one way or the other.

You can think of the logic while your attending classes or while eating or during a match or while you’re working out. Sometimes you never get the logic when you want them, it will directly come up when you are into some other work.

Alan Perlis once stated:

“A language that doesn’t affect the way you think about programming, is not worth knowing.”

Quick Message Application Using Flask

Senthil Pitchappan V — Thu, 22 Jul 2021 09:25:55 +0000

As Whats App released What's App Payment in its new Update, people often have to save the number to their contact list. Even if people want to send a single message or want privacy, they have to save the number.
To overcome all this problem, here is an application that can be used directly to send what's app message without saving the number in your contact list.

New Update 💯(5th August 2021):

Added Quick Viber and Line message service. Just give the profile name of the user and it takes you directly to Line. And for Viber, give the users phone number with country code (without +)

Last Update 12th December 2020):

Added Quick Telegram message service. Just give the profile name of the user and it takes you directly to telegram.

Upcoming update

Signal Quick messaging
WeChat Quick messaging

Access the Application 👇👇
Quick Chat

Please do use it on your mobile devices. And also add the page to your home screen for easy access
Updates coming soon!!!

Twitter API

Senthil Pitchappan V — Thu, 22 Jul 2021 06:42:31 +0000

Twitter Provides API for developers to use these API to create applications, send message in twitter, post content, post tweets etc. Twitter lets gives a monthly cap of 5,00,000 tweets to pull using the API.

Libraries

Tweet library (python) Docs
twitter4j jar (java) Docs

Steps

Download tweet library (pip install tweet)
Create a Twitter Developer account Create Account
Go to projects and Apps in your developer account Projects and Apps
Create an App and obtain consumer key, consumer secret, access token, access token secret
Find the keys and access token in your twitter apps tab under keys and tokens

DEV Community: Senthil Pitchappan V

I built a full Markdown IDE using Claude Opus 4. Live preview, AI assistant (BYOM), diagrams, workspaces all client-side, zero backend. No signup. No subscriptions. Just open and write. Try it now - https://v-senthil.github.io/mark-viwer/

I Got Tired of Tab Hell Just to Write Documentation - So I Built This

I Got Tired of Tab Hell Just to Write Documentation - So I Built This

What Is Mark Viewer?

The Feature Stack

⚡ Live Edit + Live Preview

🤖 AI-Powered Assistant - Bring Your Own Model

🧭 Smart TOC & Navigation

📊 Analytics & Document Insights

📁 Workspace & File Management

📦 PWA + Native Desktop

Who Is This For?

The Technical Stack

Why I Built This

Try It

Feedback Welcome

Automatic number-plate recognition in just 15 lines of code

Accurate, Fast, Developer- Friendly ALPR

To get API Key:

Python

Code

Dev.to API's which can be used to view posts on your web page / portfolio

Steps:

API:

Your Published Article

Your Unpublished Article

Update an Article

Create a new post

List of followers

List of tags you follow

Get your Profile Photo

Viber API

Steps

Points to Note:

Changes you should make

Send Text Message

Send Picture

Send Video

Send File

Send Contact

WEATHER API IN 6 LINES OF CODE

To get API Key

HOW PROGRAMMING LANGUAGE CHANGE HOW YOU THINK!

Quick Message Application Using Flask

New Update 💯(5th August 2021):

Last Update 12th December 2020):

Upcoming update

Twitter API

Libraries

Steps

Python

Java