By now, you are probably bored of reading so many reviews of text editors that more or less do the same thing, with the few odd feature that gives a gimmick to the app.
Today, though, we’re here to present to you a very different kind of text editor, though. One that deconstructs how you work with HTML documents and also brings us a powerful and comfortable solution for making the whole process easier and much more visually appealing. It’s called TypeMetal.
What Is It Exactly?
TypeMetal is a unique HTML editor that combines the live preview of your HTML code with the actual coding itself. It hides all the HTML syntax from you, but it makes the results of it visible by giving you a live preview of your document using Webkit.
TypeMetal’s interface
Think of text editors like Chocolat, that use Webkit to give you a live preview of your HTML content, but in two separate windows. Your code is in one side, and the preview of how it will actually look on a browser is on the other. With TypeMetal, both of these exist in one single place. As you write, you’re both structuring your HTML as you are previewing how it will look. I know, it all sounds very confusing, so let me delve deeper into the app…
Writing The Content
On first glance, TypeMetal looks like any regular text editor, but as soon as you get to write your HTML you’ll notice how the app jumps up to fill the backend for you and it just shows you the end result based on a given style sheet. At the forefront of the app is your previewed content, but there’s much more behind the app.
The path bar
As a visual aid, there’s a bar on the bottom of your document that shows you the path of the element that’s currently selected. This way you won’t get lost when you are creating new tags or inspectioning how all the elements are nested. There are a few more tools to inspect your code, but we’ll get to them later.
Auto Complete
Typing the ‘<’ character will immediately invoke the HTML autocomplete, which will show you a huge list of elements that you might be looking for. Type a few more characters and your autocomplete list will be refined to the matching elements. Choose your element, type whatever will go inside it and press Tab to exit the element, all without having to interact with any tag directly. Quite a timesaver, isn’t it?
How autocomplete works with tags
Source Loupe and Blocks
If at any moment you get confused with the structure of your document and you want to have a peek at the HTML code, there’s an option called the Source Loop that acts as a pop-up window which will display the code of your selected piece of text. It’s not directly editable, but it will give you a good idea of how your elements and tags are structured.
The source loop gives you a peek of the code
Blocks are another tool that can help you get a better idea of how the structure of your element is being arranged. Turning it on will give a visual representation of how your divs, paragraphs and other relevant elements are nested.
CSS and HTML Snippets
Since TypeMetal is centered around showing you all the time how your content will be displayed in the target site where it will be hosted, you can of course load your own CSS sheets into the app, so that your content is previewed inside the app exactly like it will look once it’s posted online.
Adding a snippet set
Snippets are another useful feature that the app has. It’s quite self-explanatory: just save any piece of text as a snippet and the app will create code sets that you can then invoke just like you would with any other HTML attribute. For example, you can use these to automatically invoke elements with given classes and id’s.
Keyboard Shortcuts
TypeMetal implements keyboard shortcuts for pretty much any task that you can imagine. Want to create a heading? There’s a shortcut for immediately creating one of any size. Opening elements, creating attributes within them, exiting them, creating lists and hyperlinks; it’s all available through a keyboard shortcut.
Some Examples of Keyboard Shortcuts
Does It Work?
Although the concept of the app looks attractive enough, I found it very hard to get used to it, and it was a little frustrating at times not having the ability to just modify the HTML code directly.
An example of some Markdown
TypeMetal creates its own type of twisted markup, but in the end, although I appreciate the idea of the app, I can’t help but wish I was working with markup when I’m using it since it’s more versatile, simple and transparent, and just like TypeMetal, it isn’t as visually demanding as plain HTML. Although, for structuring bigger projects which may include a lot of blocks and coding that goes beyond markup’s capabilities, I can see TypeMetal being very useful. It’s just a matter of getting used to it.
Conclusion
TypeMetal parts from the assumption that a clean structure makes up for more focused writing, instead of getting lost and confused in HTML structures or Markup syntax. It definitely delivers on that concept, and its live preview of your HTML document surely saves you the steps of later translating your content into the correct structure. You can have your writing done as well as your code structuring at the same time.
Overall, TypeMetal presents a great and unique idea, but the app still needs some more work done before it can compete with any of the regular text editors. There are a few bugs and some quirks in the functionality that keep it from being perfect, but it looks very promising and we’ll keep our eyes peeled to see how it evolves over time and what the developer can turn it into.
     |