Git Product home page Git Product logo

html-editor's Introduction

About

A small and lighting fast in-browser HTML editor with syntax highlighting and instant preview for code you type. It is a great tool for HTML prototyping since you do not have to save the file everytime you want to make the changes. On top of that it's only single HTML file and works offline too.

You can think this app as a diet version of CodePen.io or JsFiddle but you can run it locally. It has two main windows -- left is used for code editor and the right one is used for HTML preview. For syntax highlighting it uses an awesome CodeMirror library.

HTML Editor support following features.

  • Open file from local disk
  • Save file to local disk
  • Syntax highlighting
  • Word Wrap
  • Instant preview window
  • Keyboard shortcuts
  • Responsive design for mobile
  • Works offline

Demo are available at https://rioastamal.net/html-editor/

Demo HTML Editor

Run

To run the HTML editor just open file src/index.html using your favorite web browser and you're ready to go.

Build

The build process will generate single HTML file of the editor. It may useful if you want to host or upload the editor to your own server. The build script only uses Bash so it should be easy to run.

$ bash build.sh
Build file build/index.html complete.

You can try to open file build/index.html using web browser.

Changelog

v1.2

  • Hide or show for code editor window
  • Prompt a file name on SaveAs feature
  • Confirm to user before closing or reloading the page
  • Add meta tags to the page
  • Add keyboard shortcuts

v1.1

  • Bug fixes: Undefined function name removeObjectURL() on saveAsFile() function.

v1.0

  • Initial release of HTML Editor

Author

This application is written by Rio Astamal <[email protected]>

License

This application is open source licensed under MIT license.

html-editor's People

Contributors

rioastamal avatar

Watchers

James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.