---
<!-- Copyright © SixtyFPS GmbH <info@slint.dev> ; SPDX-License-Identifier: MIT -->
title: Overview
type: overview
sidebar:
  order: 1
hero:
  title: Welcome to Slint
  tagline: Seamlessly build elegant GUIs for Embedded,&nbsp;Desktop,&nbsp;and&nbsp;Mobile
---

import { LinkButton, LinkCard, Card, CardGrid } from '@astrojs/starlight/components';
import { Image } from 'astro:assets';
import mattermostLogoLight from '/src/assets/mattermost-logo-dark.svg';
import mattermostLogoDark from '/src/assets/mattermost-logo-light.svg';
import FourCardGrid from '/src/components/FourCardGrid.astro';
import BannerImage from '/src/assets/banner.webp';
import LanguageHint from '/src/assets/getting-started/language-hint.webp';
import RunInSlintPad from '/src/assets/getting-started/run-in-slintpad.webp';
import CopySnippet from '/src/assets/getting-started/copy-snippet.webp';
import LineHighlight from '/src/assets/getting-started/line-highlight.webp';



<div style="display: flex; justify-content: center;">
  <Image src={BannerImage} width="700px" alt="Slint examples running on a range of devices"/>
</div>

The documentation is split into several sections:

<CardGrid>
<LinkCard
  title="Guide"
  description="This will get you up and running with the tooling for Slint development including the IDE integration via the Slint Language Server (LSP) and Slint Viewer.
  <br/><br/>
  It then offers a guide explaining all the key concepts of Slint and how to understand and use the Slint language."
  href="/master/docs/slint"
>
</LinkCard>

<LinkCard
  title="Reference"
  description="This contains the API reference for all aspects of the Slint language. All the elements, properties, functions, callbacks and namespaces. It also contains the
API reference for the `std-widgets` library. A set of cross platform components that can be used to build desktop applications."
  href="/master/docs/slint/reference/primitive-types"
>
</LinkCard>

<LinkCard
  title="Tutorial"
  description="For those that like to learn by example or want to see how to structure a simple application, this section contains a step-by-step tutorial that walks you 
through the creation of a simple memory game example."
href="/master/docs/slint/tutorial/quickstart/"
>
</LinkCard>

<LinkCard
  title="Language Integrations"
  description="This details the API for the Rust, C++, and JS-Runtime versions of Slint."
href="/master/docs/slint/language-integrations/"
>
</LinkCard>
</CardGrid>

### Documentation features

The documentation includes a lot of code snippets. The language hint lets you know what
language the snippet is written in.
<div style="display: flex; justify-content: left;">
<Image src={LanguageHint} width="500" alt="Screenshot showing language hint" />
</div>


Some snippets of Slint code are interactive. You can click the `run` button to run the snippet
in a web based live-editing tool called [SlintPad](https://slintpad.com).
<div style="display: flex; justify-content: left;">
<Image src={RunInSlintPad} width="500" alt="Screenshot showing run button"  />
</div>

To easily copy the text of a snippet use the copy button.
<div style="display: flex; justify-content: left;">
<Image src={CopySnippet} width="500" alt="Screenshot showing copy button"  />
</div>

Examples that want to help focus on a specific part of the code will have highlights. They are only
a documentation feature and you won't see this kind of highlight when writing your own code.
<div style="display: flex; justify-content: left;">
<Image src={LineHighlight} width="500" alt="Screenshot showing text highlights" />
</div>

### Get in touch

<FourCardGrid>
<LinkCard
  title="Chat"
  href="https://chat.slint.dev/"
  target="_blank"
/>
<LinkCard
  title="Discussions"
  href="https://github.com/slint-ui/slint/discussions"
  target="_blank"
/>
<LinkCard
  title="Report Bugs"
  href="https://github.com/slint-ui/slint/issues"
  target="_blank"
/>
<LinkCard
  title="Email"
  href="mailto:info@slint.dev"
  target="_blank"
/>
</FourCardGrid>
