LCUI

The C library for build user interfaces

Table of contents

• Table of contents
• Introduction
  • Overview of Features
  • Architecture
• Quick Start
• Documentation
  • Tutorials
  • References
• Roadmap
• Contribution
• FAQ
• License

Introduction

中文版说明文档

LCUI is a library written in C language for building graphical user interfaces. Its functional design and usage refer to some popular technologies in the field of web front-end, such as CSS and Flex layout. It is easier for developers with experience in web page development to get started.

LC originates from the first letter of the author's name, and was originally designed to facilitate the author's development of small projects and accumulate development experience. However, unfortunately, the author did not gain sufficient competitive advantage in the employment environment of many excellent C/C++developers, and could only be forced to work in web front-end development. It is precisely because of this that LCUI's current development direction leans towards integrating technologies in the field of web front-end.

Overview of Features

You can learn about the development experience of LCUI applications from the following screenshot:

• Component Development in React-like Style: Writing UI configuration files using TypeScript. With the combined advantages of TypeScript, JSX syntax, and the LCUI React library, you can succinctly describe interface structure, resource dependencies, component states, data binding, and event binding.
• Various Stylesheet Writing Methods: Tailwind CSS, CSS Modules, Sass, and global CSS.
• File-system based router: Organize application pages in directory form, with each page corresponding to a directory. The path of the directory serves as the route for that page. With the built-in application router, you can easily implement page switching and navigation without manual route configuration.
• User-friendly and Modern Icon Library: Icons are sourced from the fluentui-system-icons library, with partial customization to fit LCUI's characteristics, offering similar usage patterns.
• Command-line Development Tool: Run the lcui build command to preprocess configuration files within the app directory, then generate corresponding C source code and resource files.

Architecture

Over time LCUI has been built up to be based on various libraries:

• lib/yutil: Utility library providing common data structures and functions.
• lib/pandagl: PandaGL (Panda Graphics Library), offering font management, text layout, image I/O, graphics processing, and rendering capabilities.
• lib/css: CSS parser and selector engine providing CSS parsing and selection capabilities.
• lib/platform: Platform library offering cross-platform unified system-related APIs, including message loop, window management, input method, etc.
• lib/thread: Thread library providing cross-platform multithreading capabilities.
• lib/timer: Timer library providing the ability to execute tasks at regular intervals.
• lib/ui: UI core library providing essential UI capabilities such as UI component management, event queue, style computation, and drawing.
• lib/ui-xml: XML parsing library providing the ability to create UI from XML file content.
• lib/ui-cursor: Cursor library offering cursor drawing capabilities.
• lib/ui-server: UI server providing the ability to map UI components to system windows.
• lib/ui-router: Router manager offering route mapping and navigation capabilities.
• lib/ui-widgets: Predefined basic component library providing basic UI components such as text, button, scrollbar, etc.
• lib/worker: Worker thread library providing simple worker thread communication and management capabilities.

Quick Start

Before you begin, you need to install the following software on your computer:

• Git: Version control tool used to download the source code of the example project.
• XMake: Build tool used to build the project.
• Node.js: JavaScript runtime environment used to run the LCUI command-line development tool.

Then, run the following commands in a command-line window:

# Install the LCUI command-line development tool
npm install -g @lcui/cli

# Create an LCUI application project
lcui create my-lcui-app

Follow the prompts provided by the commands afterward.

Documentation

• Online Documentation
• Request for Comments (RFC)
• Changelog
• Contribution Guidelines

Tutorials

• Todo List: Learn the basic concepts and usage of LCUI, as well as how to use it to build interfaces and implement state management, interface updates, and interactions.
• Rendering Fabric Animation: Rewrite the existing fabric simulation program's JavaScript source code in C language, and use the cairo graphics library for fabric rendering. Then, apply LCUI to implement fabric animation playback and interaction.
• Browser: Referencing a web browser, use LCUI to implement similar interface structure, layout, style, and multi-tab management features. Utilize LCUI's routing management functionality to implement multi-tab page state management and navigation, as well as a simple file browsing page. (This tutorial is outdated, contributions to update it are welcome)

References

Some features of LCUI and related projects are inspired by other open-source projects. You can refer to their documentation to understand the basic concepts and usage.

• DirectXTK: Source code reference for the step timer.
• Vue Router: Reference for the router manager. Some functionalities also reference the source code of Vue Router.
• Next.js: Reference for route definition methods.

Roadmap

Here are the upcoming items:

• LCUI
  • Improve API design.
  • Enhance the CSS engine to support inherit, !important, and escape characters.
  • Add SDL backend to replace the lib/platform library.
  • Adapt to other open-source graphics libraries for better rendering performance.
• Command-line Tools
  • lcui build --watch: Continuously monitor file changes and automatically rebuild.
  • lcui dev-server: Similar to webpack-dev-server, builds the LCUI application as a website for developers to preview interfaces in the browser.
  • Add build cache to rebuild only files that have changed.
• React Component Library: Referencing some web frontend component libraries (e.g., radix, shadcn/ui), develop a TypeScript + React component library suitable for LCUI applications, reusing components from the LC Design component library.
• Documentation
  • Tutorials
  • Request for Comments (RFC)

Contribution

Think LCUI is slow to update? there are many ways to contribute to LCUI.

• Submit bugs and help us verify fixes as they are checked in.
• Share some interesting ideas related to GUI development in the issues page.
• Search for FIXME comments in the source code and try to fix them.
• Fund the issues that interest you on IssueHunt to attract other developers to contribute.
• Review the source code changes.
• Contribute bug fixes.

LCUI has adopted the code of conduct defined by the Contributor Covenant. This document is used across many open source communities, and we think it articulates our values well. For more, see the Code of Conduct.

FAQ

Is this a browser kernel? Or a development library like Electron that integrates the browser environment?

No, you can think of it as a traditional GUI development library that applied some Web technologies.

How about CSS support?

The following is a list of supported CSS features. Checked is supported (But does not mean full support). Unlisted properties are not supported by default.

CSS feature coverage

• at rules
  • @font-face
  • @keyframes
  • @media
• keywords
  • !important
• selectors
  • *
  • type
  • #id
  • .class
  • :hover
  • :focus
  • :active
  • :first-child
  • :last-child
  • [attr="value"]
  • :not()
  • :nth-child()
  • parent > child
  • a ~ b
  • ::after
  • ::before
  • ...
• units
  • px
  • dp
  • sp
  • pt
  • %
  • rem
  • vh
  • vw
• properties
  • top, right, bottom, left
  • width, height
  • visibility
  • display
    • none
    • inline-block
    • block
    • flex
    • inline-flex
    • inline
    • grid
    • table
    • table-cell
    • table-row
    • table-column
    • ...
  • position
    • static
    • relative
    • absolute
    • fixed
  • box-sizing
    • border-box
    • content-box
  • border
  • border-radius
  • background-color
  • background-image
  • background-position
  • background-cover
  • background
  • pointer-events
  • font-face
  • font-family
  • font-size
  • font-style
  • flex
  • flex-shrink
  • flex-grow
  • flex-basis
  • flex-wrap
  • flex-direction
  • justify-content
    • flex-start
    • center
    • flex-end
  • align-items
    • flex-start
    • center
    • flex-end
    • stretch
  • float
  • transition
  • transform
  • ...

License

The LCUI Project is released under the MIT License.