https://github.com/urin/vscode-web-visual-editor

Skip to content

Navigation Menu

Toggle navigation
 
Sign in

  * Product
      +  
        GitHub Copilot
        Write better code with AI
      +  
        Security
        Find and fix vulnerabilities
      +  
        Actions
        Automate any workflow
      +  
        Codespaces
        Instant dev environments
      +  
        Issues
        Plan and track work
      +  
        Code Review
        Manage code changes
      +  
        Discussions
        Collaborate outside of code
      +  
        Code Search
        Find more, search less
    Explore
      + All features
      + Documentation
      + GitHub Skills
      + Blog
  * Solutions
    By size
      + Enterprise
      + Teams
      + Startups
    By industry
      + Healthcare
      + Financial services
      + Manufacturing
    By use case
      + CI/CD & Automation
      + DevOps
      + DevSecOps
  * Resources
    Topics
      + AI
      + DevOps
      + Security
      + Software Development
      + View all
    Explore
      + Learning Pathways
      + White papers, Ebooks, Webinars
      + Customer Stories
      + Partners
  * Open Source
      +  
        GitHub Sponsors
        Fund open source developers
      +  
        The ReadME Project
        GitHub community articles
    Repositories
      + Topics
      + Trending
      + Collections
  * Enterprise
      +  
        Enterprise platform
        AI-powered developer platform
    Available add-ons
      +  
        Advanced Security
        Enterprise-grade security features
      +  
        GitHub Copilot
        Enterprise-grade AI features
      +  
        Premium Support
        Enterprise-grade 24/7 support
  * Pricing

Search or jump to...

Search code, repositories, users, issues, pull requests...

Search
[                    ]
Clear

Search syntax tips

Provide feedback

We read every piece of feedback, and take your input very seriously.

[                    ] [ ] Include my email address so I can be
contacted
Cancel Submit feedback

Saved searches

Use saved searches to filter your results more quickly

Name [                    ] 
Query [                    ]

To see all available qualifiers, see our documentation.

Cancel Create saved search
Sign in
Sign up Reseting focus
You signed in with another tab or window. Reload to refresh your
session. You signed out in another tab or window. Reload to refresh
your session. You switched accounts on another tab or window. Reload
to refresh your session. Dismiss alert
{{ message }}
urin / vscode-web-visual-editor Public
generated from urin/.github

  * 
  * Notifications You must be signed in to change notification
    settings
  * Fork 3
  * Star 339

Edit HTML files visually.

marketplace.visualstudio.com/items?itemname=
urin.vscode-web-visual-editor

License

MIT license
339 stars 3 forks Branches Tags Activity
Star
Notifications You must be signed in to change notification settings

  * Code
  * Issues 1
  * Pull requests 0
  * Actions
  * Security
  * Insights

Additional navigation options

  * Code
  * Issues
  * Pull requests
  * Actions
  * Security
  * Insights

urin/vscode-web-visual-editor

This commit does not belong to any branch on this repository, and may
belong to a fork outside of the repository.
 main
BranchesTags
  
Go to file
Code

Folders and files

     Name            Name      Last commit message Last commit date
Latest commit

 

History

70 Commits
 
.vscode         .vscode                             
images          images                              
src             src                                 
webview         webview                             
.eslintrc.json  .eslintrc.json                      
.gitignore      .gitignore                          
.vscodeignore   .vscodeignore                       
FUNDING.yml     FUNDING.yml                         
LICENSE         LICENSE                             
README.md       README.md                           
esbuild.js      esbuild.js                          
package.json    package.json                        
tsconfig.json   tsconfig.json                       
View all files

Repository files navigation

  * README
  * MIT license

Web Visual Editor Installs Stars

 

Edit HTML files visually in real-time.

Demo

 Features

 

  * [?] Visual Editing: Edit HTML elements visually within the
    WebView.
  * [?][?] Real-Time Preview: See changes reflected instantly as you
    edit.
  *  Integrated with Visual Studio Code: No additional processes and
    windows and well-integrated with VSCode theme.

 Functions

 

  * [?] Element Selection: Select HTML elements with ease. Visual
    selections are synchronized with text selections on editor.
  *  Zoom in and out: Zoom in and out the page.
  * | Move Elements: Drag elements to rearrange their position.
  * = Align Elements: Easy to align elements.
  * [?] Copy, Cut and Paste elements: Copy or cut elements, paste text
    into selected element.
  *  Script and Link Management: Disable scripts and manage links
    for security.

Alternatives

 

This extension is similar to microsoft/vscode-livepreview and it
differs in the following points:

  * The ability to synchronize code selection with visual selection
    in the preview.
  * Since Web Visual Editor has minimal functionality, the codebase
    is very small, making future expansions easy.
  * It is designed to reflect changes made in the preview back to the
    code, so enhancing the editing capabilities within the preview
    may be beneficial in the future. For example, you can copy, cut,
    paste and delete elements within preview at this moment.

 License

 

MIT License

 Sponsor

 

Sponsor icon Empower my motivation brewing and accelerate development
by buying me a coffee!

About

Edit HTML files visually.

marketplace.visualstudio.com/items?itemName=
Urin.vscode-web-visual-editor

Topics

html vscode-extension visual-editor

Resources

Readme

License

MIT license
Activity

Stars

339 stars

Watchers

1 watching

Forks

3 forks
Report repository

Releases

18 tags

Sponsor this project

 
Sponsor
Learn more about GitHub Sponsors

Languages

  * JavaScript 55.8%
  * TypeScript 35.8%
  * CSS 8.4%

Footer

 (c) 2024 GitHub, Inc.

Footer navigation

  * Terms
  * Privacy
  * Security
  * Status
  * Docs
  * Contact
  * Manage cookies
  * Do not share my personal information

You can't perform that action at this time.