
Show HN: An unusual approach to Front end Coding - tjchear
TL;DR: A Vi-like Editor but for editing webpages. https:&#x2F;&#x2F;vivpage.com<p>Why: Long ago I had the idea of typing simple commands (something like h1 hello world!) into the browser and have it materialize elements as I do so. So I quickly prototyped it in a couple days and found it really fast and fun to make website this way, especially if you&#x27;re already proficient with the CSS framework you use, e.g in Bootstrap, just pull out a Jumbotron div for a quick hero section.<p>With Vi as my inspiration, I then went to town with React non-stop for 3-4 weeks, and that effort culminated in Vivpage.<p>So what can Vivpage do?
1. WYSIWYG: that&#x27;s right, your changes are rendered right away.<p>2. Parallel Editing: you can edit (or apply an operation to) multiple elements or text at the same time.<p>3. Versatile Multi-Selection and Navigation: many different shortcut keys for jumping to a specific element or multi-selecting elements, e.g from current to last sibling, or all of children), and also CSS selector based selection (so you can select only elements that match div.col, for example).<p>4. CSS Framework Support: built-in support for Bootstrap, Bulma, Materialize, Tailwind, and UIkit, but you can also use any other framework you desire.<p>5. Element Splitting&#x2F;Joining: Split an element along a specific child, or merge multiple elements (e.g divs) together.<p>6. Undo&#x2F;Redo: BOY this is a tough one, but one that I think is really necessary. I made it really easy to go back and forth along the undo history (without using Redux, no less!)<p>7. More features to come: search&#x2F;replace, reusable template library, cloud syncing (right now it saves to localStorage), integration with github&#x2F;drive.<p>Like Vi, it&#x27;s not the fluffy and guide your hand tool that most expect - but I believe once you master even the basics of it, you can become really productive.<p>Criticisms and feedback are welcome!
======
tjchear
Here's the link to the editor: [https://vivpage.com](https://vivpage.com)

