# Javascript Object that is library for all HTML, CSS, and Javascript

**URL:** <https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054>\
**Category:** MDN\
**Created:** [December 28, 2019, 3:59am UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054 "2019-12-28T03:59:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![gretagremlin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/gretagremlin/32/31392_2.png) [@gretagremlin](https://discourse.mozilla.org/u/gretagremlin)\
**Post date:** [December 28, 2019, 3:59am UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054/1 "2019-12-28T03:59:10Z")

</div>

I’m attempting to put together a text editor that uses buttons(many buttons) for inputting code and was looking to filter these buttons based on each’s properties. For example, which are compatible with all/some browsers, experimental, deprecated, obsolete, and so forth. I’ve been using the MDN site for sometime and was wondering if there is a Javascript object(or some kind of library) that contains all of the HTML, CSS, and Javascript properties/values listed.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [December 28, 2019, 12:28pm UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054/2 "2019-12-28T12:28:52Z")

</div>

Hi @gretagremlin! This is what the BCD project does; see [https://github.com/mdn/browser-compat-data](https://github.com/mdn/browser-compat-data)

You can get the data as an NPM package too: [https://www.npmjs.com/package/mdn-browser-compat-data](https://www.npmjs.com/package/mdn-browser-compat-data)

---

<div class="post-metadata">

**Author:** ![gretagremlin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/gretagremlin/32/31392_2.png) [@gretagremlin](https://discourse.mozilla.org/u/gretagremlin)\
**Post date:** [December 29, 2019, 12:31am UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054/3 "2019-12-29T00:31:03Z")

</div>

Thank you @chrisdavidmills! This is immensely useful. Out of curiousity, would you know of any other projects like this. For example in this table for [background-color](https://drafts.csswg.org/css-backgrounds-3/#background-color), I was hoping to find this type of information organized like the BCD project.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [December 30, 2019, 9:37am UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054/4 "2019-12-30T09:37:49Z")

</div>

@gretagremlin Yes; we have this kind of data organized in the MND data repo: [https://github.com/mdn/data](https://github.com/mdn/data)

See [https://github.com/mdn/data/blob/master/css/properties.json](https://github.com/mdn/data/blob/master/css/properties.json)

And the NPM version: [https://www.npmjs.com/package/mdn-data](https://www.npmjs.com/package/mdn-data)

Although this repo is not quite as often/well-maintained as browser-compat-data. We use it to generate the info boxes and formal syntax boxes on our CSS reference pages, but not many people seem to find them useful as they do the compat tables.

---

<div class="post-metadata">

**Author:** ![gretagremlin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/gretagremlin/32/31392_2.png) [@gretagremlin](https://discourse.mozilla.org/u/gretagremlin)\
**Post date:** [January 1, 2020, 10:27am UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054/5 "2020-01-01T10:27:20Z")

</div>

@chrisdavidmills Wonderful! Would there be more data categorized like it was in the browser-compat-data [here](https://github.com/mdn/browser-compat-data#repository-contents)? Or would the data repo be limited to css, api, and svg as of now? Mainly was wondering where the content for the html and javascript pages (among others) was coming from.

Also when digging through the CSS references, I was looking for a way to navigate the site by category. Would there be a way to place a listing of these categories (like groups used in the side nav) on its own page? Similarily to what the HTML pages have [here](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories) and [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).

Also, in the sidenav groups, some of the categorization seemed different, such as background and borders. I browsed through the W3C module categories [here](https://www.w3.org/TR/CSS22/) and [here](https://www.w3.org/TR/css-box-3/#borders). Curious as to why they changed it. Background and Colors made more sense as well as borders being part of the Box Model. If another page was made, didn’t know if using a different categorization would interfere with what is shown in side nav. I have some ideas for easily navigable categories I’d be happy to contribute along with some images.

---

<div class="post-metadata">

**Author:** ![chrisdavidmills](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/chrisdavidmills/32/21688_2.png) [@chrisdavidmills](https://discourse.mozilla.org/u/chrisdavidmills)\
**Post date:** [January 2, 2020, 9:14am UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054/6 "2020-01-02T09:14:32Z")

</div>

@gretagremlin let’s go through these Qs one by one:

> Would there be more data categorized like it was in the browser-compat-data [here](https://github.com/mdn/browser-compat-data#repository-contents)?

Not really, in the case of the data repo/. It is only really complete for the CSS data really. The sidebars for the other sections are largely generated from various macros we have, and the other content is largely static.

As a note, future iterations of MDN will based much more on structured data sets (see our [stumptown experiment](https://github.com/mdn/stumptown-content)), for exactly these kinds of use cases.

> Would there be a way to place a listing of these categories (like groups used in the side nav) on its own page?

There are a number of ways we could do this. The CSS `data` repo has the `groups` field that is used to generate the appropriate links in the CSS sidebars. We could make a page that would use a macro to generate a link for each group, which links to that group’s landing page (there should be a landing page for each group, not sure if there actually is in 100% of cases).

> Also, in the sidenav groups, some of the categorization seemed different, such as background and borders

Yeah, this is probably because we decided on some of the groupings a while ago, and some more recently, when the associated specs were in different states.

I’d be interested in hearing about your ideas; it is unlikely that we’d make any changes to this implementation any time soon, but probably when we start to move towards our new implementation in the future.

---

<div class="post-metadata">

**Author:** ![gretagremlin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/gretagremlin/32/31392_2.png) [@gretagremlin](https://discourse.mozilla.org/u/gretagremlin)\
**Post date:** [January 3, 2020, 9:15pm UTC](https://discourse.mozilla.org/t/javascript-object-that-is-library-for-all-html-css-and-javascript/51054/7 "2020-01-03T21:15:39Z")

</div>

@chrisdavidmills Sounds good, I’ll start a new topic with a list of suggestions/proposals, once ready.
