Make a web-site or app, and make it run live in the cloud with one click, without having to download, setup, or configure anything.
JZedit editor/IDE
webide.se runs JZedit - a editor/IDE for the cloud, and offers shell/workspace for developing and editing web sites, apps and Node.JS services, with database support for persistence, on always-online containers.
Our goal is to be the best editor for developing progressive web apps and web sites using vanilla JavaScript.
This will be achived by having:
- Better static analysis and type inference with vanilla JavaScript, then you can get using TypeScript.
- Performance comparable to native editors like Sublime Text, Notepad++ and Vim
JZedit selling points
- Runs in the browser
- JavaScript support
- Written in vanilla JS with shared source
- Fast and Simple.
Cloud editor
- Separate backend/frontend lets you run the server on any PC/VPS/server (npm install -g jzedit) and connect to it from anywhere
- The server can be set up for multiple users. Where each user share the same environment, but get separated isolated work spaces.
Runs everywhere
- You can run the (front-end) client on any device that has a HTML compatible web browser. JZedit supports Chromebook's, Smart-phones, tablets, and even smart-TV's and watches (if they have a built in web browser)
- It's possible to run the editor embedded on a web site.
- You can of course also run it locally on your own developer machine.
JavaScript support
- Incremental JavaScript parsing (in web worker)
- Function list for quick navigation
- Automatic indentation
- Auto-completion and function-argument hinting.
- Shows console.log messages inside the editor
- Run Node.JS scripts.
- Automatic quote insertion
- Different colors for strings, comments and HTML tags (also inside strings/templates)
Edit files remotely
- Connect to FTP/FTPS/SFTP servers.
- Google Drive support
- VNC support (for connecting to GUI based servers and desktops)
Additional features
- Modal/modes (support for VIM key bindings). Ctrl+M
- Integrated source control: Commit from within the editor and show annotations.
- Built in static site generator with scripting capabilities using JavaScript, with support for Node.JS modules.
- Live preview and WYSIYG editing.
- Grouped file tabs
- Zoom out Alt+Z with markdown topics highlighted for faster navigation.
- Talk to the editor using voice commands
- Print support (PDF)
- Built in virtual keyboard
- Collaborate editing: Edit the same document with others - at the same time!
- Able to run emulators and GUI applications (via VNC).
- Floating windows: De-attach a file and have it in another window which can be moved to a different monitor.
- Integrated terminal emulator
- A simple, yet powerful plugin API makes it fast and simple to add new features using vanilla JavaScript.
- Plugins/extensions are hot loadable, no need to restart the editor
- File explorer. Ctrl+E
- Go to any file. Ctrl+O
- Able to open and edit huge files several GB big
- Open files from any remote machine, for example when SSH:ed type jzeditr /path/to/file and it will open in the editor
- Automatically wrap text Ctrl+W
- Spell checking with multiple languages and camelCase support.
- Automatic CSS refresh in preview mode.
- .diff file coloring.
- File tabs.
- Find Ctrl+F
- Find in any file. Ctrl+Shif+F
- Function to fork any web site, useful for tutorials and examples. Append ?fork=url to the query string
- Full screen support F11
- Google drive integration
- Quick file open/search Ctrl+O
- Goto line Ctrl+G
- Goto character Ctrl+H
- Lorem ipsum generator.Ctrl+L
- Support both LF and CRLF (unix and Windows line breaks) and able to convert between them
- Parentheses highlighting
- FTP,FTPS,SFTP protocol support
- Highlight current line
- Fading text in the margins.
- Caret hides when you type
- Double click to highlight words.
- Line numbers
- Plugins can render info bubbles.
- Speech synthesis reads out the current line, word and caret character. (append ?voice to the query string)
- Pipe a text stream to the editor from a terminal, or from a different machine.
- Touch scrolling
- Undo/redo Ctrl+Z/Ctrl+Y
- Indention line helpers Ctrl+I
- Mouse and touch screen support
- Text selection using keyboard or mouse
- Dark theme support (add ?darkTheme to query string)
Despite the above features, the editor is pretty fast and light-weight. Total download size is only 2 MB.
Use cases
In the classroom
Teachers can run the server on their PC or a dedicated box, so each student get access to the same developer enviroment.
Develop in the cloud or LAN
Have the same environment in development as in production. Always accessible from any computer. Similar to SSH -X on unix/Linux.
Build your own cloud IDE
Use JZedit as base for your own web based IDE, for example for integration with your cloud offerings. Or CPU/board development. Or a new programming language.
Use it for local development
npm install -g jzedit and you will have a simple, extendable editor for JavaScript and web development.
Web site editor
The editor can be open in WYSIWYG mode, with GUI buttons for preview and publishing using the built in static site generator ...
Also for non-technical users
The editor is not only for developers, it can also be setup so that a non-technical user can use it,
for example to edit their web site via WYSIWYG, write a blog post, edit documentation, etc.
with simplified source control management.
For example when using the built in static site generator together with a software repository,
it will automatically pull new updates from the repo,
merge if necessary, and ask the user to write a commit message before publishing.
Architecture
JZedit is made in JavaScript, HTML and CSS. And it use hardware accelerated HTML 2d Canvas for text rendering.
JZEdit's architecture is plugin and event driven, which makes it fun and easy to extend with new features.
Back-end and front-end is separated in order to make everything work in the browser. The back-end is a Node.JS server. And the client (front-end) can be any browser or nw.js
JZedit has a small core of only a few files. All functionality, even the rending, is implemented via plugins.
Each plugin is a independent unit and do not depend on, or interfere with other plugins.
Plugins can be hot loaded, so while making a plugin, you can reload the plugin without reloading the editor.
What makes JZedit better then existing editors/IDE's, or what does it do differently !?
JZedit is written in "vanilla" JavaScript, eg. no compilation or build step, it's easy to add new functionality, and all you have to do to see the new changes is to refresh/reload. Or if you are working on a plugin, press F7 key to hot reload the plugin without refreshing.
The editor does Not use the document object model (DOM) or "content-editable" for text rendering! JZedit uses 2d Canvas, which is faster then the DOM.
When editing a file, it's parsed client-side an every key stroke, which enables automatic indentation, and "IDE" features like function-list and auto-complete.
You can run the cloud editor on your computer, mobile phone, or your own server, not only the client, but also the server. Eg. you could host the editor on your mobile phone or laptop, then let others connect to it via Wifi.
Why are you not working on something more important, text-editing is a solved problem!?
We think there are room for improvements to make writing code easier and more fun, especially for beginners.
And we want to bring professional tools like source control, and static-site-generation to organisations to help them more efficiently manage, share and collaborate with documents and (public or intranet) web sites.
We think high level programming and web-development have become too complex. We want to make development easier and more simple.
Many people have a computer in their pocket. We want to make it easier to develop using a smartphone.
The web environment and JavaScript allows rapid development and we would like to experiment with stuff like speech-to-text, and visual aids to show which parts of the code does what, what parts are hot, the scope of variables etc.
Run JZedit locally
Skeptical about running the editor in the cloud? You can install the editor on your own workstation or server!
First install nodejs, (sudo apt install nodejs) or download from Node.js website.
With nodejs you should get a program called npm. Open a terminal/command-prompt and type: npm install -g jzedit.
To run the editor type npm start, or if you installed globally (-g flag) jzedit [path/to/file].
Or if you only want to run the server and open the editor in a browser, type npm run server.