Objects and Properties
The documentation of Pixelstack’s objects and their properties.
Rectangle
To render a rectangle (or a square), can also have rounded corners.
Top
top Usage example
my-rectangle . top = 100 Left
left Usage example
my-rectangle . left = 100 Width
width Usage example
my-rectangle . width = 100 Height
height Usage example
my-rectangle . height = 100 Corner Radius
cornerRadius Usage example
my-rectangle . cornerRadius = 16 Fill
fill Usage example
my-rectangle . fill = #0000FF Gradient Angle
gradientAngle Usage example
my-rectangle . gradientAngle Gradient Color Stops
gradientColorStops Usage example
my-rectangle . gradientColorStops = #0000FF, #000000 Stroke Color
strokeColor Usage example
my-rectangle . strokeColor = #0000FF Stroke Width
strokeWidth Usage example
my-rectangle . strokeWidth = 2 Opacity
opacity Usage example
my-rectangle . opacity = 0.5 Ellipse
To render ellipse (or a circle).
Top
top Usage example
my-ellipse . top = 100 Left
left Usage example
my-ellipse . left = 100 Width
width Usage example
my-ellipse . width = 100 Height
height Usage example
my-ellipse . height = 100 Fill
fill Usage example
my-ellipse . fill = #0000FF Gradient Angle
gradientAngle Usage example
my-ellipse . gradientAngle Gradient Color Stops
gradientColorStops Usage example
my-ellipse . gradientColorStops = #0000FF, #000000 Stroke Color
strokeColor Usage example
my-ellipse . strokeColor = #0000FF Stroke Width
strokeWidth Usage example
my-ellipse . strokeWidth = 2 Opacity
opacity Usage example
my-ellipse . opacity = 0.5 Text
To render static or dynamic text.
Top
top Usage example
my-text . top = 100 Left
left Usage example
my-text . left = 100 Width
width Usage example
my-text . width = 100 Height
height Usage example
my-text . height = 100 Text
text Usage example
my-text . text = Hello World Fill
fill Usage example
my-text . fill = #0000FF Font Family
fontFamily Usage example
my-text . fontFamily = Playfair Display Font Size
fontSize Usage example
my-text . fontSize = 32 Auto Fit
autoFit Usage example
my-text . autoFit = true Min Font Size
minFontSize Usage example
my-text . minFontSize = 12 Max Font Size
maxFontSize Usage example
my-text . maxFontSize = 72 Text Align
textAlign Usage example
my-text . textAlign = center Font Weight
fontWeight Usage example
my-text . fontWeight = 700 Italic
italic Usage example
my-text . italic = true Vertical Align
verticalAlign Usage example
my-text . verticalAlign = middle Underline
underline Usage example
my-text . underline = true Linethrough
linethrough Usage example
my-text . linethrough = true Overline
overline Usage example
my-text . overline = true Opacity
opacity Usage example
my-text . opacity = 0.5 Image
To render an image via URl, or via an integration.
Top
top Usage example
my-image . top = 100 Left
left Usage example
my-image . left = 100 Width
width Usage example
my-image . width = 100 Height
height Usage example
my-image . height = 100 Source
src Usage example
my-image . src = https://picsum.photos/id/150/512/512 Image Fit
imageFit Usage example
my-image . imageFit = cover Corner Radius
cornerRadius Usage example
my-image . cornerRadius = 16 Stroke Color
strokeColor Usage example
my-image . strokeColor = #0000FF Stroke Width
strokeWidth Usage example
my-image . strokeWidth = 2 Opacity
opacity Usage example
my-image . opacity = 0.5 Chart
To render a chart to visualize data. Supports most common charts, such as bar chart, pie chart, etc.
Top
top Usage example
my-chart . top = 100 Left
left Usage example
my-chart . left = 100 Width
width Usage example
my-chart . width = 100 Height
height Usage example
my-chart . height = 100 Chart Type
chartType Usage example
my-chart . chartType = pie Chart Data
chartData Usage example
my-chart . chartData = {} Opacity
opacity Usage example
my-chart . opacity = 0.5 Table
To render a data table. Supports JSON and CSV data formats.
Top
top Usage example
my-table . top = 100 Left
left Usage example
my-table . left = 100 Width
width Usage example
my-table . width = 100 Height
height Usage example
my-table . height = 100 Fill
fill Usage example
my-table . fill = #0000FF Opacity
opacity Usage example
my-table . opacity = 0.5 Data
tableData Usage example
my-table . tableData = [{"name": "Alice", "score": 95}, {"name": "Bob", "score": 87}] Show Header
showHeader Usage example
my-table . showHeader = true Header Font Size
headerFontSize Usage example
my-table . headerFontSize = 16 Header Font
headerFontFamily Usage example
my-table . headerFontFamily = Noto Sans Header Weight
headerFontWeight Usage example
my-table . headerFontWeight = 700 Header Color
headerColor Usage example
my-table . headerColor = #000000 Body Font Size
bodyFontSize Usage example
my-table . bodyFontSize = 14 Body Font
bodyFontFamily Usage example
my-table . bodyFontFamily = Noto Sans Body Weight
bodyFontWeight Usage example
my-table . bodyFontWeight = 400 Body Color
bodyColor Usage example
my-table . bodyColor = #333333 Border Style
borderStyle Usage example
my-table . borderStyle = grid Border Color
borderColor Usage example
my-table . borderColor = #E5E7EB Border Width
borderWidth Usage example
my-table . borderWidth = 1 Alternate Row Fill
alternateRowFill Usage example
my-table . alternateRowFill = #F9FAFB Cell Padding X
cellPaddingX Usage example
my-table . cellPaddingX = 12 Cell Padding Y
cellPaddingY Usage example
my-table . cellPaddingY = 8 Row Gap
rowGap Usage example
my-table . rowGap = 2 Max Rows
maxRows Usage example
my-table . maxRows = 10 Empty Message
emptyMessage Usage example
my-table . emptyMessage = No data available View
The view/artboard where your design is rendered. Pixelstack only supports one view per design at the moment. You do not need to specify the ID of the view when overriding its property values.
Width
width Usage example
width = 100 Height
height Usage example
height = 100 Fill
fill Usage example
fill = #0000FF