Markets

This Free Visual Editor Let’s You Edit Your Web App’s Content Without Digging Into the Code

Do you have content on your website? Ever wished you could edit it visually, without digging into code?

Intlayer Visual Editor, a free and open-source tool that allows you to edit your web app’s content directly in a visual interface.

Why Intlayer Visual Editor?

  • Multilingual support – Manage content in multiple languages effortlessly.
  • Works with Markdown – Perfect for static sites and developers.
  • Handles external files – Supports .md, .txt, and more.
  • Open Source & Free – Modify and extend it as needed.

Try it out: https://intlayer.org/playground

Have issues or feature ideas? GitHub Repo

How It Works

The visual editor consists of:

  1. A frontend application – Loads your website inside an iframe and detects editable content.
  2. A server-side process – When you save changes, it updates your content declaration files (in JSON format for now).

Installation & Setup

Once Intlayer is configured in your project, install intlayer-editor:

npm install intlayer-editor --save-dev

Then, configure a intlayer.config.ts file:

const config = {
  editor: {
    applicationURL: "http://localhost:3000",
  },
};
export default config;

Using the Editor

Once installed, start the editor:

npx intlayer-editor start

Then, open http://localhost:8000 in your browser and hover over content to edit it! 🎨

Get Involved!

This project is 100% open-source! If you want to contribute, report issues, or suggest features:

GitHub Repo: https://github.com/aymericzip/intlayer

🎉 Would love to hear your thoughts and feedback! Let’s make content editing easier for developers. 🚀

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button