DEV Community: R Shahriar

How to Preview JSX, TSX, Vue & Markdown Files Without Setting Up a Full Project

R Shahriar — Thu, 13 Aug 2026 16:17:16 +0000

There is a small problem that many developers encounter but rarely talk about:

You have a file, but you don't have an easy way to see what it looks like.

This became especially noticeable to me after I started using AI coding tools.

Today, you can ask an AI to generate a dashboard, landing page, settings screen, portfolio, or even an entire application UI. Instead of getting a single HTML file, the AI may give you something like:

App.jsx
Dashboard.tsx
Login.vue
README.md
styles.scss
icon.svg

Opening the file is easy.

Previewing it is a different story.

That problem is what led me to build Preview Kit.

The JSX problem

Imagine that you ask an AI:

Create a modern SaaS dashboard using React.

A few seconds later, you get a file called:

Dashboard.jsx

Now you want to see the interface.

With HTML, the workflow is familiar:

index.html → double-click → browser

With JSX, things can become much more complicated.

JSX is used to describe React UI, so simply opening the file as a normal document does not automatically give you the rendered React interface. Depending on what the file contains, you may need a React environment, dependencies, a bundler, or a development server.

There are already browser extensions specifically designed around the problem of previewing standalone JSX/TSX files without setting up a React development environment, which is a good indication that this is a real workflow problem rather than a theoretical one.

But I kept thinking:

Why do I need to create a complete development environment just to preview one file?

AI made this problem more common

Before AI coding became mainstream, I usually started with a project.

Now I often start with a prompt.

The workflow can look like this:

Idea
  ↓
Ask AI
  ↓
AI generates JSX/TSX
  ↓
I want to see the result

The generation part is incredibly fast.

The problem comes at the last step.

You have the code, but you still need to figure out how to preview it.

This has become particularly relevant with AI-generated UI experiments. Developers are increasingly receiving standalone JSX and TSX files from AI tools and looking for ways to inspect those files without creating a complete application around them.

That led me to a simple question:

What if previewing a code file could be as easy as opening an image?

JSX isn't the only file with this problem

Once I started working on this idea, I realized that JSX was only one part of the problem.

Modern development involves many different file formats.

TSX

React projects frequently use TypeScript with JSX, producing .tsx files.

You can open a TSX file in an editor, but opening it as text and actually seeing the rendered UI are two different things.

Vue

Vue components commonly use .vue single-file components.

They contain templates, scripts and styles together.

Again, sometimes you don't want to start a complete Vue project.

You just want to inspect the component.

Markdown

Markdown is another perfect example.

A file might contain:

# My Project

This is an **important** note.

- First item
- Second item

Opening the file as plain text shows the Markdown syntax.

But what you really want to see is the rendered document.

This is why Markdown preview functionality is so common in developer tools. Even dedicated file-preview libraries provide separate Markdown rendering instead of treating .md files as ordinary text.

SVG

SVG creates another interesting situation.

An SVG file is technically text/XML, but when you're working with an icon or illustration, you usually don't want to inspect hundreds of lines of XML.

You want to see:

the image.

So I built Preview Kit

The idea behind Preview Kit is simple:

If I have the file, I should be able to preview the file without turning it into a full project first.

Preview Kit is a Windows application designed around quick file previewing.

It supports formats such as:

JSX
TSX
HTML
Vue
Markdown
JSON
CSS
SCSS

and more.

The goal isn't to replace your IDE.

It isn't trying to replace React.

It isn't trying to replace Vue.

And it isn't another full development environment.

It solves a much smaller problem:

You already have the file. You just want to see it.

A different workflow for AI-generated code

Here's where I think tools like Preview Kit become especially useful.

Suppose you ask an AI to design a login page.

The AI returns:

LoginPage.jsx

Instead of immediately creating a React project, installing packages and configuring a development environment, you can first preview the file.

Then you can decide whether the design is actually useful.

Maybe the sidebar is too large.

Maybe the buttons are too small.

Maybe the spacing looks wrong.

Maybe you want a completely different layout.

You can send that feedback back to the AI.

Then preview the next version.

The workflow becomes:

Prompt
   ↓
AI generates UI
   ↓
Preview
   ↓
Give feedback
   ↓
AI improves UI
   ↓
Preview again

That feedback loop can be much faster when you are experimenting with designs.

Preview first. Build later.

This is the part that matters most to me.

A generated component is not always a finished application.

Sometimes it is just an experiment.

Sometimes it is a mockup.

Sometimes it is a prototype.

Sometimes you just want to know:

“Does this look good?”

Creating an entire React or Vue project for every small experiment adds friction.

A lightweight preview workflow lets you separate two things:

Seeing what something looks like

from

Building it into a real application

Those are not always the same task.

Previewing developer files should be easier

We already accept this idea for many other file types.

You double-click an image and see the image.

You open a PDF and see the document.

You open a video and watch the video.

So when someone gives you a frontend component, why should the first step be:

Install Node.

Create a project.

Install dependencies.

Configure the tooling.

Start a server.

Then finally see the component.

Sometimes that's necessary.

But sometimes it feels like using a construction site just to look at a chair.

Who is Preview Kit for?

Preview Kit was originally inspired by my own problem, but I think it can be useful for several types of users.

AI-assisted developers

If you frequently use ChatGPT, Claude, Gemini, Cursor, or other AI coding tools, you may regularly receive JSX, TSX, HTML, Vue, Markdown or other frontend files.

Preview Kit gives you a faster way to inspect them.

Frontend developers

Sometimes you're debugging or testing an individual component and don't want to spend time rebuilding a full environment just for a quick inspection.

Designers

Developers increasingly send design concepts as actual frontend code.

A quick preview can make it easier to review those ideas.

Beginners

Learning React or Vue can involve a lot of setup.

Being able to inspect a component without immediately understanding the entire toolchain can make experimentation less intimidating.

Anyone working with developer files

You may not even be a frontend developer.

You may just have a .md, .svg, .json, .css, .scss or other file and want to see its contents in a useful form.

The original reason I built it

The story behind Preview Kit is actually pretty simple.

I was building a Windows application using AI.

Like many people, I asked the AI to create a demo UI for me.

Instead of giving me an HTML file, it gave me a JSX file.

That was new to me.

I had always worked with HTML, so opening an HTML file was trivial.

But when I tried to open the JSX file, I realized that the same workflow didn't apply.

So I searched:

How do I open a JSX file?

I searched Google.

I asked AI.

I looked at different approaches.

Most of the answers were focused on setting up React or using a development environment.

But that wasn't really what I was looking for.

I wasn't trying to become a React build-system expert.

I simply wanted to see the UI that the AI had generated.

Then I had an idea.

If I had this problem, other people using AI-generated code would probably have it too.

And if JSX had this problem, other modern file formats probably did as well.

That's where the idea for Preview Kit started.

The bigger idea

I don't think the future of software development is only about writing more code.

It's also about reducing the friction around the code that AI generates.

AI can generate a file in seconds.

The next challenge is often understanding, previewing, reviewing and iterating on that file.

Tools that make those steps easier can become useful parts of the AI-assisted development workflow.

Preview Kit is my attempt at solving one small part of that problem.

Try it when you just want to see the file

The next time an AI gives you something like:

component.jsx
page.tsx
Button.vue
README.md
styles.scss
icon.svg

before creating a whole new project, ask yourself:

Do I really need the full environment right now?

Maybe you just need a preview.

That's the idea behind Preview Kit.

Open the file. Preview it. Decide what to do next.

Preview Kit is available for Windows through the Microsoft Store.

Get Preview Kit on the Microsoft Store

Windows Doesn't Have a Real Internet Speed Meter... So I Built One

R Shahriar — Sat, 04 Jul 2026 19:09:12 +0000

One thing that always surprised me about Windows is that there's no simple way to see your internet speed in real time.

Yes, Task Manager shows network activity.

Yes, Settings shows data usage.

But neither gives you a small, always-visible internet speed meter that you can glance at while working, gaming, or downloading files.

The Problem

I wanted something that could answer these questions instantly:

Is my internet actually slow?
Is something downloading in the background?
How much data have I used today?
Why is my bandwidth suddenly maxed out?

Windows couldn't answer these without opening multiple windows.

So I Built Internet Usage Tracker

Instead of a complex network analyzer, I wanted something simple and clean.

The app includes:

🚀 Real-time upload & download speed
📊 Daily internet usage tracking
🖥️ A beautiful customizable floating speed meter
⚡ Lightweight performance with minimal resource usage

The best part is that the speed meter blends naturally with your desktop, making it feel like a native Windows widget instead of another bulky application.

Who Is It For?

This tool is useful if you:

Download large files regularly
Play online games
Work from home
Stream videos
Have a limited internet plan
Simply want to monitor your connection in real time

Final Thoughts

If you've ever searched for "How to show internet speed on Windows 10", "Internet speed meter for Windows 11", or "How to monitor internet usage on PC", this is exactly why I created Internet Usage Tracker.

I'd love to hear your feedback.

What feature would make an internet speed meter perfect for you?

AI Generates the Code. PreviewKit Lets You See It Instantly.

R Shahriar — Sat, 04 Jul 2026 18:44:48 +0000

AI coding assistants have changed the way I build frontend applications.

Instead of spending 30 minutes creating a UI component, I can describe what I want and get a React or Vue component in seconds.

That's amazing.

But I noticed something interesting.

The faster AI became at generating code, the more obvious one old problem became:

Previewing that code was still slow.

The Productivity Gap

Imagine this workflow.

You ask an AI to create a pricing card.

It generates a JSX file.

Now you want to know one thing:

Does it actually look good?

Instead of seeing the answer immediately, you have to:

Create a React project
Install dependencies
Copy the component
Run the development server
Wait for everything to load

Ironically, previewing the component often takes longer than generating it.

That doesn't make sense anymore.

The Idea Behind PreviewKit

I wanted something much simpler.

I wanted frontend files to behave like normal files.

Double-click.

Open.

Preview.

Done.

That's exactly what PreviewKit is designed to do.

More Than Just JSX

Although PreviewKit started as an idea for React developers, I quickly realized the same problem exists across different frontend technologies.

That's why PreviewKit supports:

JSX
Vue
HTML

Whether you're testing an AI-generated component, reviewing a teammate's work, or opening an old UI prototype, the experience should be identical.

No setup.

No configuration.

No unnecessary steps.

Why This Matters

The future of development isn't just about writing code.

It's about reviewing, testing, and iterating faster.

AI has accelerated code generation.

Developer tools now need to accelerate everything that comes after it.

PreviewKit helps close that gap by making visual feedback almost instant.

Built for Everyday Development

I didn't build PreviewKit for massive enterprise projects.

I built it for everyday moments.

Opening a component.

Checking a layout.

Reviewing a UI.

Testing an idea.

Those are tasks we perform constantly.

Removing friction from those moments makes development feel noticeably smoother.

Final Thoughts

Some tools try to solve everything.

PreviewKit focuses on solving one problem really well.

Opening frontend files shouldn't require creating an entire project.

It should be as simple as opening an image.

That's the experience I'm trying to build.

If you're constantly working with JSX, Vue, or HTML files, I'd love to know:

How do you currently preview standalone components?

How I Built an AI-Powered Windows App to Automate Image SEO

R Shahriar — Sat, 04 Jul 2026 18:23:25 +0000

If you've ever managed a large collection of images, you've probably experienced this.

Editing the images is only half the job.

After exporting them, you still need to add:

Titles
Descriptions
Alt text
Keywords
IPTC/XMP metadata

For a handful of images, that's manageable.

For hundreds of images, it becomes one of the most repetitive tasks in the entire workflow.

The Problem

I searched for a Windows application that could:

Generate image metadata with AI
Write IPTC and XMP metadata directly into image files
Process multiple images in bulk
Still allow full manual editing

I found tools that handled parts of the workflow.

Some could edit metadata.

Some could generate AI text.

But I couldn't find one focused on Image SEO from start to finish.

So I decided to build it myself.

Building Image SEO AI

The project eventually became Image SEO AI, a Windows desktop application built specifically for creators who need to optimize image metadata.

Instead of replacing existing photo editors, the goal was to eliminate repetitive metadata work.

Today, the application can:

Generate image titles with AI
Create SEO-friendly descriptions
Generate alt text
Suggest relevant keywords
Write IPTC & XMP metadata
Process up to 50 images in a single batch
Support both AI-assisted and manual editing
One Challenge I Didn't Expect

The biggest challenge wasn't AI.

It was designing a workflow that still felt familiar.

Many users don't want AI to make every decision.

Sometimes they just want a better starting point.

That's why every AI-generated field can be edited before saving.

The application is designed to speed up repetitive work—not remove user control.

Lessons Learned

Building this project taught me a few things.

AI works best as an assistant, not a replacement.
Small workflow improvements can save hours every week.
Metadata management is still an underserved problem.
Simplicity often matters more than adding more features.
What's Next?

I'm continuing to improve Image SEO AI based on user feedback.

Some of the features I'm currently exploring include:

Smarter keyword suggestions
Additional metadata standards
Better AI prompts
More bulk automation
Improved export options

If you regularly work with images, I'd love to hear how you currently handle metadata.

Is there a feature you wish existing tools had?

I'm always looking for ideas from developers, photographers, marketers, and content creators.