Hyperview

Hyperview

  • Guides
  • Examples
  • Reference
  • Blog

›Display Elements

Reference

  • Index

Behaviors

  • Behavior Attributes
  • <behavior>
  • Alert
  • Share

Display Elements

  • <doc>
  • <screen>
  • <header>
  • <body>
  • <view>
  • <text>
  • <image>
  • <list>
  • <section-list>
  • <section>
  • <section-title>
  • <items>
  • <item>
  • <spinner>
  • <web-view>

Input Elements

  • <form>
  • <text-field>
  • <select-single>
  • <select-multiple>
  • <option>
  • <picker-field>
  • <picker-item>
  • <switch>
  • <date-field>

Style Elements

  • <styles>
  • <style>
  • <modifier>

Hyperview Client

  • Hyperview component
  • Custom elements
  • Custom behaviors
  • Loading Screen

Hyperview Navigation

  • <navigator>
  • <nav-route>

<text>

The <text> element is a basic building block to show text content in the UI layout. Text elements can by styled typographically with style rules.

Some examples of styles applied to text (including nested text):

<screen>
  <styles>
    <style
      fontFamily="HKGrotesk-Regular"
      fontSize="16"
      id="Description"
      margin="24"
      marginBottom="0"
    />
    <style fontFamily="HKGrotesk-Medium" fontSize="24" id="Basic" margin="24" />
    <style fontFamily="HKGrotesk-Bold" fontSize="16" id="Bold" margin="24" />
    <style
      backgroundColor="#63CB76"
      color="white"
      fontFamily="HKGrotesk-Bold"
      fontSize="32"
      id="Color"
      margin="24"
      padding="16"
    />
  </styles>
  <body scroll="true">
    <text style="Basic">Hello, world!</text>

    <text style="Basic">Hello,
      <text style="Bold">World of
        <text style="Color">HyperView!</text>
      </text>
    </text>
  </body>
</screen>

Structure

A <view> element can only appear anywhere within a <screen> element.

Attributes

  • Behavior attributes
  • style
  • numberOfLines
  • id
  • hide
  • selectable
  • adjustsFontSizeToFit
  • allowFontScaling
  • maxFontSizeMultiplier
  • minimumFontScale
  • preformatted

Behavior attributes

A <view> element accepts the standard behavior attributes, including all triggers (press, refresh, visible, etc).

style

TypeRequired
stringNo

A space-separated list of styles to apply to the element. See Styles. Note that text style rules will cannot be applied to a <view>.

numberOfLines

TypeRequired
integerNo

An integer representing the number of lines of text to display before the text content truncates. The width of the element is determined by the applied styles and the dimensions of the device screen.

id

TypeRequired
stringNo

A global attribute uniquely identifying the element in the whole document.

hide

TypeRequired
false (default), trueNo

If hide="true", the element will not be rendered on screen. If the element or any of the element's children have a behavior that triggers on "load" or "visible", those behaviors will not trigger while the element is hidden.

selectable

TypeRequired
booleanNo

A boolean that allows users to select the content of <text> element.

adjustsFontSizeToFit

TypeRequired
booleanNo

If adjustsFontSizeToFit="true", fonts will be scaled down automatically to fit given style constraints.

allowFontScaling

TypeRequired
booleanNo

Specifies whether fonts should scale to respect Text Size accessibility setting

maxFontSizeMultiplier

TypeRequired
numberNo

Specifies whether fonts should scale to respect Text Size accessibility setting

minimumFontScale (iOS)

TypeRequired
numberNo

Specifies the smallest possible scale a font can reach when adjustsFontSizeToFit is enabled. (values 0.01-1.0).

preformatted

TypeRequired
booleanNo

By default, <text> element stips out extraneous whitespaces and line breaks. This attribute prevents this behavior, so that all spaces and line-breaks are rendered.

← <view><image> →
  • Structure
  • Attributes
Hyperview
Docs
ExamplesHyperview Reference
More
BlogGitHub
Copyright © 2025 Instawork