10 repository-uri
Tools that link rendered interface elements to their source content for direct editing.
Distinguishing note: Focuses on CMS-to-UI linking rather than general visual design tools.
Explore 10 awesome GitHub repositories matching user interface & experience · Visual Editing Tools. Refine with filters or upvote what's useful.
Payload is a headless content management system and application framework that uses a code-first approach to define data schemas and administrative interfaces. By utilizing a centralized, type-safe configuration object, it automatically generates database schemas, API endpoints, and a fully customizable admin panel. The system is built on a database-agnostic architecture, allowing it to interface with various storage engines while providing a unified, type-safe API for server-side operations, REST, and GraphQL. What distinguishes Payload is its deep extensibility and developer-centric design.
Links rendered interface elements directly to content fields for faster visual updates.
TinaCMS is a headless content management framework that bridges local Git-based file storage with a visual, in-context editing interface. By treating your repository as the single source of truth, it enables developers to manage content as structured data files while providing editors with a browser-based dashboard to modify website content directly within a live preview. The framework distinguishes itself by transforming local files into a unified GraphQL API, which powers both the administrative interface and the application's data retrieval layer. This architecture allows for compile-time
Enables real-time, in-context editing by linking live webpage elements to underlying data fields.
Gutenberg is a block-based content management system editor for WordPress. It serves as a modular page builder and React-based content editor where website pages and posts are composed of discrete, reusable blocks rather than a single text area. The system enables visual content authoring through a modular interface used to arrange layout and media. It supports WordPress block development, allowing for the creation of custom modular elements and the extension of editor functionality through specialized plugins. The editor provides capabilities for dynamic content management and the creation
Enables real-time visual editing by linking rendered interface elements directly to their source content.
django-cms is a content management system framework for building enterprise websites using Python and the Django web framework. It functions as a component-based system that utilizes reusable content blocks, placeholders, and plugins to create flexible website layouts. The platform is distinguished by its focus on hierarchical page management, organizing site structures into a tree format to generate logical navigation and search-engine-friendly URLs. It also provides a multilingual platform for managing international content, including translation tools and site distribution across multiple
Links rendered interface elements to their source content for direct real-time editing.
This project is a framework for building static websites using the Hugo static site generator. It functions as a Markdown-based content management system and a page builder that utilizes Tailwind CSS to assemble modular utility-first blocks into final web pages. The system features specialized capabilities for creating academic portfolios, including a framework to import BibTeX publications and manage scholarly resumes. It also includes an AI website generator that produces deployable Markdown structures and content based on natural language descriptions. The platform covers a broad range of
Provides a visual editor extension to modify site elements without needing to edit configuration files manually.
Builder is a visual content management system and design-to-code tool that transforms visual layouts into functional code for frontend frameworks. It operates as a headless visual editor, allowing for the creation and modification of site layouts through a drag-and-drop interface. The system enables the conversion of design mockups into components for React, Vue, Svelte, and Qwik applications. It decouples layout and design management from the frontend rendering engine, allowing users to update and publish content changes to live applications without redeploying the entire codebase. The plat
Provides an interactive editor to modify site layouts and generate code using existing project components.
This is a Vim plugin that adds simultaneous multi-selection and parallel editing capabilities to the editor. It functions as a multi-cursor tool and regex-based batch editor, allowing users to perform the same editing action across multiple locations in a buffer at once. The extension enables the placement of virtual cursors across a document using regular expressions or by identifying all occurrences of a word. It also allows for the generation of cursors on every line within a visual selection to facilitate multi-line block editing. The tool supports synchronized character insertion and pa
Adds the ability to place cursors on every line within a visual selection for parallel changes.
Cherry Markdown is a web-based Markdown editor and parsing engine that converts markup text into sanitized HTML with a real-time synchronized preview pane. It functions as a rich text interface and WYSIWYG tool, providing a system for transforming markup strings into HTML documents or portable formats. The project distinguishes itself through high-performance rendering and a flexible extensibility model. It uses virtual DOM diffing and partial rendering to maintain responsiveness in large documents, and it allows for the creation of custom parsing rules and specialized HTML components via a p
Provides a visual interface to adjust the dimensions of images and tables directly within the previewer.
Presenton is an AI-powered presentation engine and API designed to transform natural language prompts, uploaded documents, and structured data into professional slide decks. It functions as a generation service that leverages large language models to automate the creation of outlines, slide content, and visual assets. The system is distinguished by its support for both cloud-based and self-hosted infrastructure, allowing for the integration of local language models and image generators to ensure data privacy. It implements a Model Context Protocol server, enabling external AI agents to trigge
Provides a visual editor to modify text, images, and slide order directly.
This project is a tool for transforming live HTML web pages into editable Figma design layers by processing the document object model and CSS. It functions as a web-to-design converter and HTML-to-layer transformer that translates browser elements into design tool primitives. The tool captures live webpage sections across multiple screen widths to preserve responsive layout behaviors during the import process. It also includes a visual content editor that identifies live website components, allowing for the direct modification and publication of content entries from a browser view. The syste
Links rendered interface elements to their source content for direct editing and publishing from a live browser view.