Parser for the UIDL language

Usage no npm install needed!

<script type="module">
  import aitmedUidlParser from 'https://cdn.skypack.dev/@aitmed/uidl-parser';


User Interface Data Layout (UIDL) Parser


  • resolveBorder
  • Create a transformer for the "border" style (look on slack)


  • Transform the positioning number values to represent percentages
  • Implemented resolveAlign
  • Fix the inconsistency output values between width/height from top level blocks
  • Remove the "type' and "style" attrs being included into block components
  • Narrowed down the returned block component props
  • Implemented decimalToWhole
  • Implemented hasLetter
  • Implemented hasDecimal
  • Implemented toPercentage

Unit tests

  • resolvePositionAttrs
  • resolveSizeAttrs
  • resolveAlign


  • align: centerX and align: centerY needs some more computational testing