Marko language preview

1. Dollar-brace expressions

horizon-dark

<div class=input.className>
  Hello ${input.name}!
</div>

atom-one-dark

<div class=input.className>
  Hello ${input.name}!
</div>

github-dark

<div class=input.className>
  Hello ${input.name}!
</div>

dracula

<div class=input.className>
  Hello ${input.name}!
</div>

nord

<div class=input.className>
  Hello ${input.name}!
</div>

github

<div class=input.className>
  Hello ${input.name}!
</div>

2. Script block

horizon-dark

<script>
module.exports = {
  onCreate() {
    this.state = { count: 0 };
  },
  increment() {
    this.state.count += 1;
  },
};
</script>

<button on-click('increment')>
  ${state.count}
</button>

atom-one-dark

<script>
module.exports = {
  onCreate() {
    this.state = { count: 0 };
  },
  increment() {
    this.state.count += 1;
  },
};
</script>

<button on-click('increment')>
  ${state.count}
</button>

github-dark

<script>
module.exports = {
  onCreate() {
    this.state = { count: 0 };
  },
  increment() {
    this.state.count += 1;
  },
};
</script>

<button on-click('increment')>
  ${state.count}
</button>

dracula

<script>
module.exports = {
  onCreate() {
    this.state = { count: 0 };
  },
  increment() {
    this.state.count += 1;
  },
};
</script>

<button on-click('increment')>
  ${state.count}
</button>

nord

<script>
module.exports = {
  onCreate() {
    this.state = { count: 0 };
  },
  increment() {
    this.state.count += 1;
  },
};
</script>

<button on-click('increment')>
  ${state.count}
</button>

github

<script>
module.exports = {
  onCreate() {
    this.state = { count: 0 };
  },
  increment() {
    this.state.count += 1;
  },
};
</script>

<button on-click('increment')>
  ${state.count}
</button>

3. TypeScript script block

horizon-dark

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

atom-one-dark

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

github-dark

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

dracula

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

nord

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

github

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

4. Concise mode with class/id shorthand

horizon-dark

div.container
  h1#title.large -- ${input.title}
  input#email.required type="email" value=input.email
  button.btn.btn-primary on-click("submit") -- Submit

atom-one-dark

div.container
  h1#title.large -- ${input.title}
  input#email.required type="email" value=input.email
  button.btn.btn-primary on-click("submit") -- Submit

github-dark

div.container
  h1#title.large -- ${input.title}
  input#email.required type="email" value=input.email
  button.btn.btn-primary on-click("submit") -- Submit

dracula

div.container
  h1#title.large -- ${input.title}
  input#email.required type="email" value=input.email
  button.btn.btn-primary on-click("submit") -- Submit

nord

div.container
  h1#title.large -- ${input.title}
  input#email.required type="email" value=input.email
  button.btn.btn-primary on-click("submit") -- Submit

github

div.container
  h1#title.large -- ${input.title}
  input#email.required type="email" value=input.email
  button.btn.btn-primary on-click("submit") -- Submit

5. Control flow

horizon-dark

<div>
  if (input.count > 0)
    p -- Positive
  else-if (input.count === 0)
    p -- Zero
  else
    p -- Negative
</div>

atom-one-dark

<div>
  if (input.count > 0)
    p -- Positive
  else-if (input.count === 0)
    p -- Zero
  else
    p -- Negative
</div>

github-dark

<div>
  if (input.count > 0)
    p -- Positive
  else-if (input.count === 0)
    p -- Zero
  else
    p -- Negative
</div>

dracula

<div>
  if (input.count > 0)
    p -- Positive
  else-if (input.count === 0)
    p -- Zero
  else
    p -- Negative
</div>

nord

<div>
  if (input.count > 0)
    p -- Positive
  else-if (input.count === 0)
    p -- Zero
  else
    p -- Negative
</div>

github

<div>
  if (input.count > 0)
    p -- Positive
  else-if (input.count === 0)
    p -- Zero
  else
    p -- Negative
</div>

6. Class component and styles

horizon-dark

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count += 1;
  }
}

<style>
  .card {
    color: red;
  }
</style>

<div class="card">
  ${state.count}
</div>

atom-one-dark

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count += 1;
  }
}

<style>
  .card {
    color: red;
  }
</style>

<div class="card">
  ${state.count}
</div>

github-dark

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count += 1;
  }
}

<style>
  .card {
    color: red;
  }
</style>

<div class="card">
  ${state.count}
</div>

dracula

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count += 1;
  }
}

<style>
  .card {
    color: red;
  }
</style>

<div class="card">
  ${state.count}
</div>

nord

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count += 1;
  }
}

<style>
  .card {
    color: red;
  }
</style>

<div class="card">
  ${state.count}
</div>

github

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count += 1;
  }
}

<style>
  .card {
    color: red;
  }
</style>

<div class="card">
  ${state.count}
</div>

Kitchen sink

horizon-dark

class {
  onCreate() {
    this.state = {
      count: 0,
      name: "",
      visible: true,
    };
  }

  increment() {
    this.state.count += 1;
  }

  submit() {
    console.log(this.state.name);
  }
}

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
  }

  .active {
    font-weight: bold;
  }
</style>

<!-- Marko template with expressions and control flow -->
<div class=["card", state.visible && "active"]>
  if (state.visible)
    h1 -- ${input.title || "Untitled"}

  input type="text" value=state.name on-input("updateName") /
  button on-click("increment") -- Count: ${state.count}
  button on-click("submit") -- Submit

  if (state.count === 0)
    p -- Start counting
  else if (state.count < 5)
    p -- Getting started
  else
    p -- ${state.count} clicks

  for (const item of input.items)
    li -- ${formatItem(item)}

  span -- Hello ${state.name || "Anonymous"}!
</div>

atom-one-dark

class {
  onCreate() {
    this.state = {
      count: 0,
      name: "",
      visible: true,
    };
  }

  increment() {
    this.state.count += 1;
  }

  submit() {
    console.log(this.state.name);
  }
}

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
  }

  .active {
    font-weight: bold;
  }
</style>

<!-- Marko template with expressions and control flow -->
<div class=["card", state.visible && "active"]>
  if (state.visible)
    h1 -- ${input.title || "Untitled"}

  input type="text" value=state.name on-input("updateName") /
  button on-click("increment") -- Count: ${state.count}
  button on-click("submit") -- Submit

  if (state.count === 0)
    p -- Start counting
  else if (state.count < 5)
    p -- Getting started
  else
    p -- ${state.count} clicks

  for (const item of input.items)
    li -- ${formatItem(item)}

  span -- Hello ${state.name || "Anonymous"}!
</div>

github-dark

class {
  onCreate() {
    this.state = {
      count: 0,
      name: "",
      visible: true,
    };
  }

  increment() {
    this.state.count += 1;
  }

  submit() {
    console.log(this.state.name);
  }
}

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
  }

  .active {
    font-weight: bold;
  }
</style>

<!-- Marko template with expressions and control flow -->
<div class=["card", state.visible && "active"]>
  if (state.visible)
    h1 -- ${input.title || "Untitled"}

  input type="text" value=state.name on-input("updateName") /
  button on-click("increment") -- Count: ${state.count}
  button on-click("submit") -- Submit

  if (state.count === 0)
    p -- Start counting
  else if (state.count < 5)
    p -- Getting started
  else
    p -- ${state.count} clicks

  for (const item of input.items)
    li -- ${formatItem(item)}

  span -- Hello ${state.name || "Anonymous"}!
</div>

dracula

class {
  onCreate() {
    this.state = {
      count: 0,
      name: "",
      visible: true,
    };
  }

  increment() {
    this.state.count += 1;
  }

  submit() {
    console.log(this.state.name);
  }
}

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
  }

  .active {
    font-weight: bold;
  }
</style>

<!-- Marko template with expressions and control flow -->
<div class=["card", state.visible && "active"]>
  if (state.visible)
    h1 -- ${input.title || "Untitled"}

  input type="text" value=state.name on-input("updateName") /
  button on-click("increment") -- Count: ${state.count}
  button on-click("submit") -- Submit

  if (state.count === 0)
    p -- Start counting
  else if (state.count < 5)
    p -- Getting started
  else
    p -- ${state.count} clicks

  for (const item of input.items)
    li -- ${formatItem(item)}

  span -- Hello ${state.name || "Anonymous"}!
</div>

nord

class {
  onCreate() {
    this.state = {
      count: 0,
      name: "",
      visible: true,
    };
  }

  increment() {
    this.state.count += 1;
  }

  submit() {
    console.log(this.state.name);
  }
}

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
  }

  .active {
    font-weight: bold;
  }
</style>

<!-- Marko template with expressions and control flow -->
<div class=["card", state.visible && "active"]>
  if (state.visible)
    h1 -- ${input.title || "Untitled"}

  input type="text" value=state.name on-input("updateName") /
  button on-click("increment") -- Count: ${state.count}
  button on-click("submit") -- Submit

  if (state.count === 0)
    p -- Start counting
  else if (state.count < 5)
    p -- Getting started
  else
    p -- ${state.count} clicks

  for (const item of input.items)
    li -- ${formatItem(item)}

  span -- Hello ${state.name || "Anonymous"}!
</div>

github

class {
  onCreate() {
    this.state = {
      count: 0,
      name: "",
      visible: true,
    };
  }

  increment() {
    this.state.count += 1;
  }

  submit() {
    console.log(this.state.name);
  }
}

<script lang="ts">
type Item = { id: number; label: string };

export function formatItem(item: Item): string {
  return `${item.id}: ${item.label}`;
}
</script>

<style>
  .card {
    padding: 1rem;
    border: 1px solid #ccc;
  }

  .active {
    font-weight: bold;
  }
</style>

<!-- Marko template with expressions and control flow -->
<div class=["card", state.visible && "active"]>
  if (state.visible)
    h1 -- ${input.title || "Untitled"}

  input type="text" value=state.name on-input("updateName") /
  button on-click("increment") -- Count: ${state.count}
  button on-click("submit") -- Submit

  if (state.count === 0)
    p -- Start counting
  else if (state.count < 5)
    p -- Getting started
  else
    p -- ${state.count} clicks

  for (const item of input.items)
    li -- ${formatItem(item)}

  span -- Hello ${state.name || "Anonymous"}!
</div>