{"id":13260,"library":"grid-template-parser","title":"CSS Grid Template Parser","description":"The `grid-template-parser` package provides utilities for converting CSS Grid `grid-template-areas` strings into structured JavaScript objects and vice-versa. It is currently at version 0.3.2, indicating it's in an early development or maintenance phase, with no explicit release cadence defined. The library offers distinct functions like `grid` for parsing a template string into a coordinate-based object representation and `template` for constructing a template string from such an object. Additionally, helper functions like `area` and `rect` simplify defining grid areas using x/y coordinates and converting between area definitions and rect objects. Its core differentiator is this bidirectional mapping functionality, specifically targeting `grid-template-areas` syntax for programmatic manipulation in JavaScript applications.","status":"active","version":"0.3.2","language":"javascript","source_language":"en","source_url":"https://github.com/anthonydugois/grid-template-parser","tags":["javascript","grid","grid-layout","template","parser"],"install":[{"cmd":"npm install grid-template-parser","lang":"bash","label":"npm"},{"cmd":"yarn add grid-template-parser","lang":"bash","label":"yarn"},{"cmd":"pnpm add grid-template-parser","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Primary function for parsing template strings. Uses named export.","wrong":"const grid = require('grid-template-parser');","symbol":"grid","correct":"import { grid } from 'grid-template-parser';"},{"note":"Primary function for building template strings from object representation. Uses named export.","wrong":"const { template } = require('grid-template-parser');","symbol":"template","correct":"import { template } from 'grid-template-parser';"},{"note":"Helper function for intuitively defining grid areas with x, y, width, height. Uses named export.","wrong":"const area = gridTemplateParser.area;","symbol":"area","correct":"import { area } from 'grid-template-parser';"},{"note":"Helper function to convert an area definition to a rect object. Uses named export.","wrong":"import * as gtp from 'grid-template-parser'; const r = gtp.rect;","symbol":"rect","correct":"import { rect } from 'grid-template-parser';"}],"quickstart":{"code":"import { grid } from 'grid-template-parser';\n\nconst gridTemplateString = `\n  \"a a a b b\"\n  \"a a a b b\"\n  \". . c c c\"\n  \"d d d d d\"\n`;\n\nconst areas = grid(gridTemplateString);\n\nconsole.log(areas);\n/* Expected Output:\n{\n  width: 5,\n  height: 4,\n  areas: {\n    a: {\n      column: {start: 1, end: 4, span: 3},\n      row: {start: 1, end: 3, span: 2},\n    },\n    b: {\n      column: {start: 4, end: 6, span: 2},\n      row: {start: 1, end: 3, span: 2},\n    },\n    c: {\n      column: {start: 3, end: 6, span: 3},\n      row: {start: 3, end: 4, span: 1},\n    },\n    d: {\n      column: {start: 1, end: 6, span: 5},\n      row: {start: 4, end: 5, span: 1},\n    },\n  },\n}*/","lang":"javascript","description":"Demonstrates parsing a CSS Grid template string into a structured JavaScript object representation with dimensions and area definitions."},"warnings":[{"fix":"Be mindful of coordinate systems. `column.start` and `row.start` in the `grid` output are 1-based. When using the `area` helper, `x` and `y` are 0-based indices for the grid cells.","message":"The `grid` function output (column/row start/end) uses 1-based indexing, while the `area` helper function takes 0-based `x` and `y` coordinates. This can lead to off-by-one errors if not carefully managed when translating between representations.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always pin the exact version (`0.3.2`) in your `package.json` to avoid unexpected breakage, and thoroughly review the changelog when updating minor versions (`npm install grid-template-parser@0.x.y`).","message":"As the package is pre-1.0.0 (currently 0.3.2), minor version updates (`0.x.0` to `0.y.0`) may introduce breaking changes to the API or data structures without prior deprecation warnings, following the spirit of semver where `0.y.z` can break `0.x.z`.","severity":"breaking","affected_versions":">=0.1.0"},{"fix":"Ensure that grid template strings follow the CSS `grid-template-areas` specification and that object structures passed to `template` are correctly formed according to the library's expected schema. Implement client-side validation if user input is involved.","message":"Input validation for malformed grid template strings or invalid object representations might be minimal. Providing incorrect input could lead to unexpected parsing results or runtime errors rather than explicit validation messages.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use ESM import syntax: `import { grid } from 'grid-template-parser';` Ensure your environment supports ESM or use a bundler like Webpack/Rollup.","cause":"Attempting to import `grid` using a CommonJS `require` statement or not destructuring the named export correctly.","error":"TypeError: grid is not a function"},{"fix":"Add `area` to your named imports: `import { template, area } from 'grid-template-parser';`","cause":"The `area` helper function was used without being explicitly imported from the package.","error":"ReferenceError: area is not defined"},{"fix":"Review the input grid template string to ensure it is correctly formatted according to CSS `grid-template-areas` rules, specifically ensuring all rows have the same number of columns and area names are correctly quoted.","cause":"The input string provided to the `grid()` function does not conform to the expected `grid-template-areas` syntax, potentially due to unmatched quotes, inconsistent row lengths, or invalid characters.","error":"Error: Invalid grid template format"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}