Documentation

Welcome to Project Helix

Last modified

Helix is the new experience management service to create, manage, and deliver great digital experiences.

Better than a long story, just try it!

Start Developing Your First Helix Project in 60 Seconds

Pre-Requisites

  1. Git should be installed and setup on your machine.
  2. For the sake of this short walkthrough we assume you are using Visual Studio Code, our IDE of choice. However, any other JavaScript IDE would do as well.
  3. We’re assuming that you are running on macOS. If you’re on Linux or Windows YMMV.

Let’s Get Started

1. Install hlx, the Helix Command Line Tool

npm i -g @adobe/helix-cli

2. Create Your First Helix Project

# our new project will be called 'hello_helix'
hlx demo hello_helix

3. Open the project in Visual Studio Code

cd hello_helix
code .

4. Launch the Local Helix Development Environment

hlx up

A browser window opens, rendering the project’s generated web page.

Rendered web page

5. Edit some content

In the IDE, navigate to index.md in the left pane and double-click to open it. Edit the document and save the changes.

Edit content

Refresh the browser and see the result.

Edited web page

6. Edit style sheet

In the IDE, navigate to htdocs/style.css in the left pane and double-click to open it. Change e.g. the background color and save the changes.

Edit CSS

Refresh the browser and see the result.

7. Start Debugging

Set a Breakpoint in your JavaScript code

In the IDE, navigate to src/html.pre.js in the left pane and double-click to open it. Set a breakpoint in the body of the pre function, switch to the Debug view and click on the green arrow in the toolbar.

Open .js file

Trigger the Breakpoint

Refresh the Browser, the Debugger will pause at the breakpoint. Take a look at the payload object in the Variables pane.

Halted at breakpoint in JavaScript code

Click Continue (F5) to resume execution. Try changing the code, save the changes and see the results in the browser.

8. Now Debug your HTL

In the IDE, navigate to src/html.htl in the left pane and double-click to open it. Set a breakpoint on a line containing a ${...} variable reference. Refresh the Browser, the Debugger will pause at the breakpoint.

Halted at breakpoint in HTL template

Congratulations! You’ve just got your hands dirty on your first Helix Project!