Application: Add Custom Code to your Desktop App

Application

Add Custom Javascript to your Desktop App

INFO

We use the most up to date version of Chromium so you can use the latest browser features when your app is running as a desktop app.

You can use the isDesktopApp() fucntion to add different behaviour to your app when it is running as a desktop app.

        import { isDesktopApp } from '@todesktop/client-core/platform/todesktop';

if (isDesktopApp()) {
  alert('You are running as a desktop app.');
}

Alternatively, We expose a window.todesktop object if you want a quick solution.

        if (window.todesktop) {
  alert('You are running as a desktop app.');
}

If you have a lot of javascript in your desktop app then we recommend separating all of your desktop specific logic into a separate javascript file.

Add Custom CSS to your Desktop App

We add a todesktop class to the html element on each page of your app. You can use this to identify when your app is being run as a desktop app.

If you want to hide an element on your desktop app you could do something like this:

        .announcement {
  background-color: hotpink;
  /* other styles... */
}

html.todesktop .announcement {
  display: none;
}

        <body>
  <div class="announcement">You should download our desktop app!</div>

  <!-- rest of your app -->
</body>

You can also do the opposite and only show an element in your desktop app.

A common use-case is to show browser controls (back, forward, refresh) in your desktop app's user interface. Here's an example of how you could achieve this:

        .back-button,
.forward-button {
  display: none;
}

html.todesktop .back-button,
html.todesktop .forward-button {
  display: block;
}

        <nav>
  <a href="/">Home</a>

  <a class="back-button" onclick="window.history.back()">←</a>

  <a class="foward-button" onclick="window.history.forward()">→</a>
</nav>

Platform-specific CSS

You may wish to add styles that apply only on specific operating systems.

Class name	Platform (operating system) target
`.todesktop-platform-win32`	Windows
`.todesktop-platform-darwin`	macOs
`.todesktop-platform-linux`	Linux

In the styles below we add a margin that will only apply on the Mac operating system.

        html.todesktop-platform-darwin .header {
  margin-top: 10px;
}

# Add Custom Javascript to your Desktop App

# Add Custom CSS to your Desktop App

# Platform-specific CSS

On this page

Add Custom Javascript to your Desktop App

Add Custom CSS to your Desktop App

Platform-specific CSS