Installing the visual editor
Paperclip's visual tooling is a good place to start for you to get a good feel for the template language.
#
VS CodeThe VS Code Extension is a really good place to start since it works out of the box. Just create a new hello-world.pc
file, and start writing plain HTML & CSS. Play around by creating a style block, use the color pickers. Get a real good feel for Paperclip.
#
Tips- To Open a live preview, execute the
Paperclip: Live Preview
while a*.pc
file is open. - To zoom, scroll & hold down the
meta
/ctrl
key. - To measure between elements, just select an element, then hold
meta
/ctrl
by hovering over another element. - You can turn off visual tools by clicking the raindrop.
- You can open the web inspector by running the command:
Developer: Open Webview Developer tools
. - If the extension stops working for whatever reason (might happen during Alpha), then run the
Developer: Reload Window
command.
#
Dev serverIf you don't have VS Code, you can install the CLI tool:
After that, create a new hello-world.pc
and type some HTML into that. Once that's done, open terminal and run:
☝🏻 this will start the dev server that will allow you to visually see your frames live as you're building them.