DEV Community: Osonwa

Convert API JSON Responses to TypeScript Types and Zod Schemas in VSCode

Osonwa — Sun, 29 Jun 2025 09:53:38 +0000

If you've ever juggled JSON data, TypeScript types, and validation schemas (like Zod), you know how tedious it can be to convert one into another—especially when switching between online tools or rewriting things manually. Good news: the Transform Tool extension for Visual Studio Code is here to make that pain go away.

🧠 What is the Transform Tool?

The Transform Tool is a powerful VSCode extension that allows developers to convert between data formats and schemas directly inside the editor. It's an adaptation of the original Polyglot Transform Tool and is now optimized for VSCode users who want a seamless, no-tab-switching experience.

Whether you're turning a JSON object from an API into a Zod schema or generating TypeScript types from raw data, this tool makes it a one-click job.

🔧 What Can You Do With It?

Here's what makes this tool a must-have for modern TypeScript developers:

-⚡ JSON ➜ Zod Objects
Instantly generate Zod schemas for type-safe validation.

🛠 JSON ➜ TypeScript Interfaces
Quickly create strongly typed definitions from sample data.
🔁 Schema to Schema Conversions
Transform between different formats without context-switching.
🧩 Inline Conversions
All transformations happen right within your VSCode workspace—no external sites, no copy-pasting.
SEE LIST OF CONVERSION TOOLS BELOW

🛠 How to Use It

Getting started is easy and takes less than a minute:

Install the Extension
Search for "Transform Tool" in the VSCode Marketplace and install it.
Head over to icon on the sidebar or Select Json in your code, right click and choose transform selected text
Run a Transformation
Pick the appropriate format to convert to for example JSON to Zod object.

✨ Key Features Recap

✅ Direct in-editor conversions
🔄 Supports multiple formats (JSON, Zod, TypeScript, etc.)
🧭 Clean and intuitive interface

-🧠 Based on the trusted Polygot Transform logic

🔚 Final Thoughts

If you frequently work with APIs, data contracts, or schema validation, the Transform Tool is a no-brainer. It’s especially useful for TypeScript + Zod projects where developer productivity and type safety matter.

📦 Stop wasting time with manual conversions—supercharge your workflow with the Transform Tool in VSCode.

Features

JSON -> Typescript
JSON -> Zod Schema
JSON -> MySQL
JSON -> Graphql
Js Object -> JSON
Js Object -> Typescript **
**TOML -> YAML
YAML -> TOML

Top 7 Must-Have VSCode Extensions to Skyrocket Your Productivity in 2025

Osonwa — Sun, 12 Jan 2025 23:37:06 +0000

Great developers aren’t defined by their code but by the tools they master to create smarter, faster, and more impactful solutions. Boosting productivity in 2025 should be on every developer's priority list. To help you achieve this, I’ve put together a list of seven essential VSCode extensions that can significantly enhance your development experience.

Transform Tool
This tool facilitates data conversion from one format, structure, or type to another. It allows you to quickly reshape and modify data to meet specific requirements or compatibility needs. If you’ve ever had to transform JSON data from an API into TypeScript types, you know how tedious it can be to do it manually, especially with large datasets. Transform Tool automates this process. At the time of writing, it supports transformations like:
JSON to TypeScript types or interfaces
JSON to Zod objects
TOML to JSON
TOML to YAML
...and many more that simplify data manipulation.
Todo Tree
Keeping track of tasks and improvements within your codebase can be challenging. Todo Tree helps you organize and manage these tasks by detecting comments marked with TODO or FIXME. It displays them in a tree structure, making it easy to navigate and review outstanding issues directly from the sidebar.
GitLens
GitLens supercharges your Git capabilities in VSCode, providing enhanced insights into code changes, commit history and authorship. It makes it easier to understand, navigate, and manage your repositories with features like blame annotations, detailed diffs, and repository history—all within your editor.
Code Spell Checker
Typos in code and documentation can be frustrating and unprofessional. Code Spell Checker underlines misspelled words with subtle white squiggly lines. Hovering over the highlighted text reveals suggestions for correct spellings or related words, helping you maintain error-free code.
Tailwind CSS IntelliSense
If you use Tailwind CSS, this extension is a game changer. It offers syntax highlighting, autocompletion, and linting for Tailwind classes. The autocomplete feature is particularly valuable, allowing you to quickly find and insert class names without remembering them fully.
Dependi
Dependi is a powerful dependency management tool that provides a comprehensive view of all project dependencies. It helps you manage updates and versions effortlessly and alerts you to vulnerabilities in your installed packages, enabling you to address security issues quickly.
ErrorLens
ErrorLens highlights errors and warnings directly in your code, making them highly visible. Instead of relying on the Problems tab, this extension prints error messages in line with the affected lines, allowing you to spot and fix issues faster.

By incorporating these tools into your VSCode setup, you can streamline your workflow, reduce friction, and become a more efficient developer in 2025. Happy coding!

Streamline Your React Development: Visualize Component Insights in VS Code

Osonwa — Tue, 23 Apr 2024 12:40:36 +0000

Hi! Are you tired of digging through your React or Nextjs project to understand its component structure? Have you found yourself looking for where a component is used? Do you want to know how many components are in a file or folder or how many hooks were used within your component file? Say goodbye to the hassle and welcome a smoother development experience with our latest VS Code extension for your React and Nextjs projects. With its array of features, you can now gain comprehensive insights into your project's components effortlessly.

Let's delve into what this extension offers:

Component Count:

Get the knowledge of how many components there are in a folder

File-Level Component Analysis:

Find out precisely how many components reside within each file, enabling you to navigate and manage your codebase more effectively.

Component Dependency Analysis:

Understanding how components interact is crucial. The extension identifies the number of times a component is utilized by other components and provides links to the files where these connections occur. Say hello to seamless navigation through your project's dependencies.

Hooks Identification:

Hooks are the backbone of React development. With this extension, you can easily identify all hooks used in a component file.

Refresh Functionality:

Keep your component insights up-to-date with just a click of a button. The refresh functionality ensures that you're always working with the latest information.

Filter Options:

Tailor your view to suit your needs by toggling "show only component files" and "show only components" toggles. These features help you see a list of all component files or just components therefore helping focus and navigate to what is most important

With these features at your fingertips, navigating and understanding your React or Nextjs project has never been easier. Say goodbye to cumbersome searches and hello to streamlined development workflows.

Ready to revolutionize your React development experience? Download the VS Code extension today and see all components while coding your React project like never before.

link to extension

Contributing

To add to the features above, and further improve the extension, below is a link to the Github repository. Please feel free to make a pull request, contribute, raise an issue, and fork the repository.

link to source code

Happy coding!

Handling host validation dynamically in Django

Osonwa — Mon, 12 Feb 2024 09:47:11 +0000

Django is a fantastic tool for making top-notch web applications in Python. It has lots of built-in security features to stop attacks like the HTTP host header attack. To deal with this, developers usually have to list all the host/domain names they want to allow and assign them to ALLOWED_HOST in the settings.py configuration file.
It's a pretty secure way to do things, but it can be a pain because you have to manually update this list every time you want to add a new host or change an existing one.

Prerequisite:

A good understanding of Python programming language
A decent experience using the Django framework

In this article, we'll explore how Django Dynamic Host helps simplify the process. We'll dive into its usage, features, and benefits.

Usage

It's pretty straightforward to make use of a Django dynamic host in your Django project. Simply begin by installing the library.

pip install django-dynamic-host

Next, you'll need to add Django dynamic host to your list of installed app

INSTALLED_APPS= [ 
   … 
  "dynamic_host",
]

After the above step, we add the middleware with which the library ships with to the top of the MIDDLEWARE settings. This middleware must sit at the top of all middleware listed.

MIDDLEWARE = [
"dynamic_host.middleware.AllowedHostMiddleWare",
…
]

Then go ahead and set the ALLOWED_HOST list to accept all host

ALLOWED_HOST = ["*"]

Kabrish! That is all you have to do to set up the library. If you run the application right now no host would be allowed on DEBUG=False but on DEBUG=True Django dynamic host by default allows localhost and 127.0.0.1.
What is left for you is to point to Django dynamic host on how to resolve whether a host is allowed or not: There are multiple ways to do this. Let's explore them one after the other.

Writing a function handler
This is the best approach to resolve domains/hosts dynamically from the database or anywhere else. This can be a function that sits anywhere in your application module but should sit in a module same level as settings.py as best practice. Django dynamic hosts expect the function to accept two arguments (host, request) and return a boolean value. Then assign the DYNAMIC_HOST_RESOLVER_FUNC in settings.py to the dotted path of the function.

project/foo.py

def dynamic_host_handler(host, request,**kwargs):
    """
        add some logic to check domain in database 
        or some inmemory database system or caching system...     
        this is totally up to you
    """
    if cache.exists(host):
        return True
    elif Model.objects.filter(domain=host).exists():
        save_to_cache(host)
        return True
    return False

The host parameter is a string domain name e.g."foo.com" and the request parameter is an instance of HTTPRequest. The above function can have any implementation but must return a boolean value of True or False: if the value returned is True it means that the host passed in is valid, else it means the host is not valid and should be blocked. Making the function value return only True will make every domain valid.
After this add the below to settings.py

DYNAMIC_HOST_RESOLVER_FUNC="project.foo.dynamic_host_handler"

And that is it you're done…. Dynamic hosts will then call your function anytime there is a need to validate hosts.

Using DYNAMIC HOST DEFAULT HOSTS
To add a list of valid hostname strings just like it is done in ALLOWED_HOSTS you can do so using the settings DYNAMIC_HOSTS_DEFAULT_HOSTS like so

DYNAMIC_HOSTS_DEFAULT_HOSTS=['foo.app', 'x.foo.com']

Using DYNAMIC HOST ALLOW ALL
Although it is not recommended to open up to all hosts. You may eventually want to do so in some test cases during development. Setting DYNAMIC_HOST_ALLOW_ALL to True opens your backend to all hosts.

DYNAMIC_HOST_ALLOW_ALL=True

Using DYNAMIC HOST ALLOW SITES
Setting this value to True makes Django dynamic host aware of you adding contrib.sites to your installed app. That way sites created via the sites model are automatically allowed.

DYNAMIC_HOST_ALLOW_SITES=True

How Django dynamic host works

Firstly, Django dynamic host will verify if you've set DYANMIC_HOST_ALLOW_ALL to True. If you have, it won't bother checking the remaining settings; it simply proceeds to allow all hosts to access the application. However, if you haven't set DYANMIC_HOST_ALLOW_ALL to true, it proceeds to check if the hostname is included in DYNAMIC_HOSTS_DEFAULT_HOSTS, or if the host is registered in one of your Django sites, or if the function resolver returns true for the hostname. If none of these conditions are met, it disallows the hostname from accessing the application.

Conclusion

Django Dynamic Host offers a robust solution for dynamically validating hostnames or simply handling host validation by writing your own rules in Django. So why struggle with manual updates to ALLOWED_HOSTS when you can leverage the power of Django Dynamic Host?
Here is a link to the GitHub repo of the Open source django dynamic host library and the PyPI link also dyango-dynamic-host you can take a look at the source code and contributions are welcome