Home

Awesome

property-information

Build Coverage Downloads Size

Info on the properties and attributes of the web platform (HTML, SVG, ARIA, XML, XMLNS, XLink).

Contents

What is this?

This package contains lots of info on all the properties and attributes found on the web platform. It includes data on HTML, SVG, ARIA, XML, XMLNS, and XLink. The names of the properties follow hast’s sensible naming scheme. It includes info on what data types attributes hold, such as whether they’re booleans or contain lists of space separated numbers.

When should I use this?

You can use this package if you’re working with hast, which is an AST for HTML, or have goals related to ASTs, such as figuring out which properties or attributes are valid, or what data types they hold.

Install

This package is ESM only. In Node.js (version 14.14+, 16.0+), install with npm:

npm install property-information

In Deno with esm.sh:

import * as propertyInformation from 'https://esm.sh/property-information@6'

In browsers with esm.sh:

<script type="module">
  import * as propertyInformation from 'https://esm.sh/property-information@6?bundle'
</script>

Use

import {html, svg, find, normalize} from 'property-information'

console.log(find(html, 'className'))
// Or: find(html, 'class')
console.log(find(svg, 'horiz-adv-x'))
// Or: find(svg, 'horizAdvX')
console.log(find(svg, 'xlink:arcrole'))
// Or: find(svg, 'xLinkArcRole')
console.log(find(html, 'xmlLang'))
// Or: find(html, 'xml:lang')
console.log(find(html, 'ariaValueNow'))
// Or: find(html, 'aria-valuenow')

Yields:

{space: 'html', attribute: 'class', property: 'className', spaceSeparated: true}
{space: 'svg', attribute: 'horiz-adv-x', property: 'horizAdvX', number: true}
{space: 'xlink', attribute: 'xlink:arcrole', property: 'xLinkArcrole'}
{space: 'xml', attribute: 'xml:lang', property: 'xmlLang'}
{attribute: 'aria-valuenow', property: 'ariaValueNow', number: true}

API

This package exports the identifiers html, svg, find, normalize, and hastToReact. There is no default export.

find(schema, name)

Look up info on a property.

In most cases, the given schema contains info on the property. All standard, most legacy, and some non-standard properties are supported. For these cases, the returned Info has hints about the value of the property.

name can also be a valid data attribute or property, in which case an Info object with the correctly cased attribute and property is returned.

name can be an unknown attribute, in which case an Info object with attribute and property set to the given name is returned. It is not recommended to provide unsupported legacy or recently specced properties.

Parameters

Returns

Info.

Example

Aside from the aforementioned example, which shows known HTML, SVG, XML, XLink, and ARIA support, data properties, and attributes are also supported:

console.log(find(html, 'data-date-of-birth'))
// Or: find(html, 'dataDateOfBirth')
// => {attribute: 'data-date-of-birth', property: 'dataDateOfBirth'}

Unknown values are passed through untouched:

console.log(find(html, 'un-Known'))
// => {attribute: 'un-Known', property: 'un-Known'}

normalize(name)

Get the cleaned case insensitive form of an attribute or property.

Parameters

Returns

string that can be used to look up the properly cased property on a Schema.

Example

html.normal[normalize('for')] // => 'htmlFor'
svg.normal[normalize('VIEWBOX')] // => 'viewBox'
html.normal[normalize('unknown')] // => undefined
html.normal[normalize('accept-charset')] // => 'acceptCharset'

html

svg

Schema for either HTML or SVG, containing info on properties from the primary space (HTML or SVG) and related embedded spaces (ARIA, XML, XMLNS, XLink).

Example

console.log(html.property.htmlFor)
// => {space: 'html', attribute: 'for', property: 'htmlFor' spaceSeparated: true}
console.log(svg.property.viewBox)
// => {space: 'svg', attribute: 'viewBox', property: 'viewBox'}
console.log(html.property.unknown)
// => undefined

Schema

A schema for a primary space.

Info

Info on a property.

hastToReact

hast is close to React, but differs in a couple of cases. To get a React property from a hast property, check if it is in hastToReact (Record<string, string>), if it is, then use the corresponding value, otherwise, use the hast property.

Types

This package is fully typed with TypeScript. It exports the additional types Info and Schema.

Compatibility

This package is at least compatible with all maintained versions of Node.js. As of now, that is Node.js 14.14+ and 16.0+. It also works in Deno and modern browsers.

Support

<!--list start-->
PropertyAttributeSpace
aLinkalinkhtml
abbrabbrhtml
aboutaboutsvg
accentHeightaccent-heightsvg
acceptaccepthtml
acceptCharsetaccept-charsethtml
accessKeyaccesskeyhtml
accumulateaccumulatesvg
actionactionhtml
additiveadditivesvg
alignalignhtml
alignmentBaselinealignment-baselinesvg
allowallowhtml
allowFullScreenallowfullscreenhtml
allowPaymentRequestallowpaymentrequesthtml
allowTransparencyallowtransparencyhtml
allowUserMediaallowusermediahtml
alphabeticalphabeticsvg
altalthtml
amplitudeamplitudesvg
arabicFormarabic-formsvg
archivearchivehtml
ariaActiveDescendantaria-activedescendant
ariaAtomicaria-atomic
ariaAutoCompletearia-autocomplete
ariaBusyaria-busy
ariaCheckedaria-checked
ariaColCountaria-colcount
ariaColIndexaria-colindex
ariaColSpanaria-colspan
ariaControlsaria-controls
ariaCurrentaria-current
ariaDescribedByaria-describedby
ariaDetailsaria-details
ariaDisabledaria-disabled
ariaDropEffectaria-dropeffect
ariaErrorMessagearia-errormessage
ariaExpandedaria-expanded
ariaFlowToaria-flowto
ariaGrabbedaria-grabbed
ariaHasPopuparia-haspopup
ariaHiddenaria-hidden
ariaInvalidaria-invalid
ariaKeyShortcutsaria-keyshortcuts
ariaLabelaria-label
ariaLabelledByaria-labelledby
ariaLevelaria-level
ariaLivearia-live
ariaModalaria-modal
ariaMultiLinearia-multiline
ariaMultiSelectablearia-multiselectable
ariaOrientationaria-orientation
ariaOwnsaria-owns
ariaPlaceholderaria-placeholder
ariaPosInSetaria-posinset
ariaPressedaria-pressed
ariaReadOnlyaria-readonly
ariaRelevantaria-relevant
ariaRequiredaria-required
ariaRoleDescriptionaria-roledescription
ariaRowCountaria-rowcount
ariaRowIndexaria-rowindex
ariaRowSpanaria-rowspan
ariaSelectedaria-selected
ariaSetSizearia-setsize
ariaSortaria-sort
ariaValueMaxaria-valuemax
ariaValueMinaria-valuemin
ariaValueNowaria-valuenow
ariaValueTextaria-valuetext
asashtml
ascentascentsvg
asyncasynchtml
attributeNameattributeNamesvg
attributeTypeattributeTypesvg
autoCapitalizeautocapitalizehtml
autoCompleteautocompletehtml
autoCorrectautocorrecthtml
autoFocusautofocushtml
autoPlayautoplayhtml
autoSaveautosavehtml
axisaxishtml
azimuthazimuthsvg
backgroundbackgroundhtml
bandwidthbandwidthsvg
baseFrequencybaseFrequencysvg
baseProfilebaseProfilesvg
baselineShiftbaseline-shiftsvg
bboxbboxsvg
beginbeginsvg
bgColorbgcolorhtml
biasbiassvg
blockingblockinghtml
borderborderhtml
borderColorbordercolorhtml
bottomMarginbottommarginhtml
bybysvg
calcModecalcModesvg
capHeightcap-heightsvg
capturecapturehtml
cellPaddingcellpaddinghtml
cellSpacingcellspacinghtml
charcharhtml
charOffcharoffhtml
charSetcharsethtml
checkedcheckedhtml
citecitehtml
classIdclassidhtml
classNameclasssvg, html
clearclearhtml
clipclipsvg
clipPathclip-pathsvg
clipPathUnitsclipPathUnitssvg
clipRuleclip-rulesvg
codecodehtml
codeBasecodebasehtml
codeTypecodetypehtml
colSpancolspanhtml
colorcolorsvg, html
colorInterpolationcolor-interpolationsvg
colorInterpolationFilterscolor-interpolation-filterssvg
colorProfilecolor-profilesvg
colorRenderingcolor-renderingsvg
colscolshtml
compactcompacthtml
contentcontentsvg, html
contentEditablecontenteditablehtml
contentScriptTypecontentScriptTypesvg
contentStyleTypecontentStyleTypesvg
controlscontrolshtml
controlsListcontrolslisthtml
coordscoordshtml
crossOrigincrossoriginsvg, html
cursorcursorsvg
cxcxsvg
cycysvg
ddsvg
datadatahtml
dataTypedatatypesvg
dateTimedatetimehtml
declaredeclarehtml
decodingdecodinghtml
defaultdefaulthtml
defaultActiondefaultActionsvg
deferdeferhtml
descentdescentsvg
diffuseConstantdiffuseConstantsvg
dirdirhtml
dirNamedirnamehtml
directiondirectionsvg
disablePictureInPicturedisablepictureinpicturehtml
disableRemotePlaybackdisableremoteplaybackhtml
disableddisabledhtml
displaydisplaysvg
divisordivisorsvg
dominantBaselinedominant-baselinesvg
downloaddownloadsvg, html
draggabledraggablehtml
durdursvg
dxdxsvg
dydysvg
edgeModeedgeModesvg
editableeditablesvg
elevationelevationsvg
enableBackgroundenable-backgroundsvg
encTypeenctypehtml
endendsvg
enterKeyHintenterkeyhinthtml
eventeventsvg, html
exponentexponentsvg
externalResourcesRequiredexternalResourcesRequiredsvg
facefacehtml
fetchPriorityfetchpriorityhtml
fillfillsvg
fillOpacityfill-opacitysvg
fillRulefill-rulesvg
filterfiltersvg
filterResfilterRessvg
filterUnitsfilterUnitssvg
floodColorflood-colorsvg
floodOpacityflood-opacitysvg
focusHighlightfocusHighlightsvg
focusablefocusablesvg
fontFamilyfont-familysvg
fontSizefont-sizesvg
fontSizeAdjustfont-size-adjustsvg
fontStretchfont-stretchsvg
fontStylefont-stylesvg
fontVariantfont-variantsvg
fontWeightfont-weightsvg
formformhtml
formActionformactionhtml
formEncTypeformenctypehtml
formMethodformmethodhtml
formNoValidateformnovalidatehtml
formTargetformtargethtml
formatformatsvg
frfrsvg
frameframehtml
frameBorderframeborderhtml
fromfromsvg
fxfxsvg
fyfysvg
g1g1svg
g2g2svg
glyphNameglyph-namesvg
glyphOrientationHorizontalglyph-orientation-horizontalsvg
glyphOrientationVerticalglyph-orientation-verticalsvg
glyphRefglyphRefsvg
gradientTransformgradientTransformsvg
gradientUnitsgradientUnitssvg
hSpacehspacehtml
handlerhandlersvg
hanginghangingsvg
hatchContentUnitshatchContentUnitssvg
hatchUnitshatchUnitssvg
headersheadershtml
heightheightsvg, html
hiddenhiddenhtml
highhighhtml
horizAdvXhoriz-adv-xsvg
horizOriginXhoriz-origin-xsvg
horizOriginYhoriz-origin-ysvg
hrefhrefsvg, html
hrefLanghreflangsvg, html
htmlForforhtml
httpEquivhttp-equivhtml
ididsvg, html
ideographicideographicsvg
imageRenderingimage-renderingsvg
imageSizesimagesizeshtml
imageSrcSetimagesrcsethtml
ininsvg
in2in2svg
inertinerthtml
initialVisibilityinitialVisibilitysvg
inputModeinputmodehtml
integrityintegrityhtml
interceptinterceptsvg
isishtml
isMapismaphtml
itemIditemidhtml
itemPropitemprophtml
itemRefitemrefhtml
itemScopeitemscopehtml
itemTypeitemtypehtml
kksvg
k1k1svg
k2k2svg
k3k3svg
k4k4svg
kernelMatrixkernelMatrixsvg
kernelUnitLengthkernelUnitLengthsvg
kerningkerningsvg
keyPointskeyPointssvg
keySplineskeySplinessvg
keyTimeskeyTimessvg
kindkindhtml
labellabelhtml
langlangsvg, html
languagelanguagehtml
leftMarginleftmarginhtml
lengthAdjustlengthAdjustsvg
letterSpacingletter-spacingsvg
lightingColorlighting-colorsvg
limitingConeAnglelimitingConeAnglesvg
linklinkhtml
listlisthtml
loadingloadinghtml
locallocalsvg
longDesclongdeschtml
looploophtml
lowlowhtml
lowSrclowsrchtml
manifestmanifesthtml
marginHeightmarginheighthtml
marginWidthmarginwidthhtml
markerEndmarker-endsvg
markerHeightmarkerHeightsvg
markerMidmarker-midsvg
markerStartmarker-startsvg
markerUnitsmarkerUnitssvg
markerWidthmarkerWidthsvg
maskmasksvg
maskContentUnitsmaskContentUnitssvg
maskUnitsmaskUnitssvg
mathematicalmathematicalsvg
maxmaxsvg, html
maxLengthmaxlengthhtml
mediamediasvg, html
mediaCharacterEncodingmediaCharacterEncodingsvg
mediaContentEncodingsmediaContentEncodingssvg
mediaSizemediaSizesvg
mediaTimemediaTimesvg
methodmethodsvg, html
minminsvg, html
minLengthminlengthhtml
modemodesvg
multiplemultiplehtml
mutedmutedhtml
namenamesvg, html
navDownnav-downsvg
navDownLeftnav-down-leftsvg
navDownRightnav-down-rightsvg
navLeftnav-leftsvg
navNextnav-nextsvg
navPrevnav-prevsvg
navRightnav-rightsvg
navUpnav-upsvg
navUpLeftnav-up-leftsvg
navUpRightnav-up-rightsvg
noHrefnohrefhtml
noModulenomodulehtml
noResizenoresizehtml
noShadenoshadehtml
noValidatenovalidatehtml
noWrapnowraphtml
noncenoncehtml
numOctavesnumOctavessvg
objectobjecthtml
observerobserversvg
offsetoffsetsvg
onAbortonabortsvg, html
onActivateonactivatesvg
onAfterPrintonafterprintsvg, html
onAuxClickonauxclickhtml
onBeforeMatchonbeforematchhtml
onBeforePrintonbeforeprintsvg, html
onBeforeToggleonbeforetogglehtml
onBeforeUnloadonbeforeunloadhtml
onBeginonbeginsvg
onBluronblurhtml
onCanPlayoncanplaysvg, html
onCanPlayThroughoncanplaythroughsvg, html
onCanceloncancelsvg, html
onChangeonchangesvg, html
onClickonclicksvg, html
onCloseonclosesvg, html
onContextLostoncontextlosthtml
onContextMenuoncontextmenuhtml
onContextRestoredoncontextrestoredhtml
onCopyoncopysvg, html
onCueChangeoncuechangesvg, html
onCutoncutsvg, html
onDblClickondblclicksvg, html
onDragondragsvg, html
onDragEndondragendsvg, html
onDragEnterondragentersvg, html
onDragExitondragexitsvg, html
onDragLeaveondragleavesvg, html
onDragOverondragoversvg, html
onDragStartondragstartsvg, html
onDropondropsvg, html
onDurationChangeondurationchangesvg, html
onEmptiedonemptiedsvg, html
onEndonendsvg
onEndedonendedsvg, html
onErroronerrorsvg, html
onFocusonfocussvg, html
onFocusInonfocusinsvg
onFocusOutonfocusoutsvg
onFormDataonformdatahtml
onHashChangeonhashchangesvg, html
onInputoninputsvg, html
onInvalidoninvalidsvg, html
onKeyDownonkeydownsvg, html
onKeyPressonkeypresssvg, html
onKeyUponkeyupsvg, html
onLanguageChangeonlanguagechangehtml
onLoadonloadsvg, html
onLoadEndonloadendhtml
onLoadStartonloadstartsvg, html
onLoadedDataonloadeddatasvg, html
onLoadedMetadataonloadedmetadatasvg, html
onMessageonmessagesvg, html
onMessageErroronmessageerrorhtml
onMouseDownonmousedownsvg, html
onMouseEnteronmouseentersvg, html
onMouseLeaveonmouseleavesvg, html
onMouseMoveonmousemovesvg, html
onMouseOutonmouseoutsvg, html
onMouseOveronmouseoversvg, html
onMouseUponmouseupsvg, html
onMouseWheelonmousewheelsvg
onOfflineonofflinesvg, html
onOnlineononlinesvg, html
onPageHideonpagehidesvg, html
onPageShowonpageshowsvg, html
onPasteonpastesvg, html
onPauseonpausesvg, html
onPlayonplaysvg, html
onPlayingonplayingsvg, html
onPopStateonpopstatesvg, html
onProgressonprogresssvg, html
onRateChangeonratechangesvg, html
onRejectionHandledonrejectionhandledhtml
onRepeatonrepeatsvg
onResetonresetsvg, html
onResizeonresizesvg, html
onScrollonscrollsvg, html
onScrollEndonscrollendhtml
onSecurityPolicyViolationonsecuritypolicyviolationhtml
onSeekedonseekedsvg, html
onSeekingonseekingsvg, html
onSelectonselectsvg, html
onShowonshowsvg
onSlotChangeonslotchangehtml
onStalledonstalledsvg, html
onStorageonstoragesvg, html
onSubmitonsubmitsvg, html
onSuspendonsuspendsvg, html
onTimeUpdateontimeupdatesvg, html
onToggleontogglesvg, html
onUnhandledRejectiononunhandledrejectionhtml
onUnloadonunloadsvg, html
onVolumeChangeonvolumechangesvg, html
onWaitingonwaitingsvg, html
onWheelonwheelhtml
onZoomonzoomsvg
opacityopacitysvg
openopenhtml
operatoroperatorsvg
optimumoptimumhtml
orderordersvg
orientorientsvg
orientationorientationsvg
originoriginsvg
overflowoverflowsvg
overlayoverlaysvg
overlinePositionoverline-positionsvg
overlineThicknessoverline-thicknesssvg
paintOrderpaint-ordersvg
panose1panose-1svg
pathpathsvg
pathLengthpathLengthsvg
patternpatternhtml
patternContentUnitspatternContentUnitssvg
patternTransformpatternTransformsvg
patternUnitspatternUnitssvg
phasephasesvg
pingpingsvg, html
pitchpitchsvg
placeholderplaceholderhtml
playbackOrderplaybackordersvg
playsInlineplaysinlinehtml
pointerEventspointer-eventssvg
pointspointssvg
pointsAtXpointsAtXsvg
pointsAtYpointsAtYsvg
pointsAtZpointsAtZsvg
popoverpopoverhtml
popoverTargetpopovertargethtml
popoverTargetActionpopovertargetactionhtml
posterposterhtml
prefixprefixhtml
preloadpreloadhtml
preserveAlphapreserveAlphasvg
preserveAspectRatiopreserveAspectRatiosvg
primitiveUnitsprimitiveUnitssvg
profileprofilehtml
promptprompthtml
propagatepropagatesvg
propertypropertysvg, html
rrsvg
radiusradiussvg
readOnlyreadonlyhtml
refXrefXsvg
refYrefYsvg
referrerPolicyreferrerpolicysvg, html
relrelsvg, html
renderingIntentrendering-intentsvg
repeatCountrepeatCountsvg
repeatDurrepeatDursvg
requiredrequiredhtml
requiredExtensionsrequiredExtensionssvg
requiredFeaturesrequiredFeaturessvg
requiredFontsrequiredFontssvg
requiredFormatsrequiredFormatssvg
resourceresourcesvg
restartrestartsvg
resultresultsvg
resultsresultshtml
revrevsvg, html
reversedreversedhtml
rightMarginrightmarginhtml
rolerole
rotaterotatesvg
rowSpanrowspanhtml
rowsrowshtml
rulesruleshtml
rxrxsvg
ryrysvg
sandboxsandboxhtml
scalescalesvg
schemeschemehtml
scopescopehtml
scopedscopedhtml
scrollingscrollinghtml
seamlessseamlesshtml
securitysecurityhtml
seedseedsvg
selectedselectedhtml
shadowRootClonableshadowrootclonablehtml
shadowRootDelegatesFocusshadowrootdelegatesfocushtml
shadowRootModeshadowrootmodehtml
shapeshapehtml
shapeRenderingshape-renderingsvg
sidesidesvg
sizesizehtml
sizessizeshtml
slopeslopesvg
slotslothtml
snapshotTimesnapshotTimesvg
spacingspacingsvg
spanspanhtml
specularConstantspecularConstantsvg
specularExponentspecularExponentsvg
spellCheckspellcheckhtml
spreadMethodspreadMethodsvg
srcsrchtml
srcDocsrcdochtml
srcLangsrclanghtml
srcSetsrcsethtml
standbystandbyhtml
startstarthtml
startOffsetstartOffsetsvg
stdDeviationstdDeviationsvg
stemhstemhsvg
stemvstemvsvg
stepstephtml
stitchTilesstitchTilessvg
stopColorstop-colorsvg
stopOpacitystop-opacitysvg
strikethroughPositionstrikethrough-positionsvg
strikethroughThicknessstrikethrough-thicknesssvg
stringstringsvg
strokestrokesvg
strokeDashArraystroke-dasharraysvg
strokeDashOffsetstroke-dashoffsetsvg
strokeLineCapstroke-linecapsvg
strokeLineJoinstroke-linejoinsvg
strokeMiterLimitstroke-miterlimitsvg
strokeOpacitystroke-opacitysvg
strokeWidthstroke-widthsvg
stylestylesvg, html
summarysummaryhtml
surfaceScalesurfaceScalesvg
syncBehaviorsyncBehaviorsvg
syncBehaviorDefaultsyncBehaviorDefaultsvg
syncMastersyncMastersvg
syncTolerancesyncTolerancesvg
syncToleranceDefaultsyncToleranceDefaultsvg
systemLanguagesystemLanguagesvg
tabIndextabindexsvg, html
tableValuestableValuessvg
targettargetsvg, html
targetXtargetXsvg
targetYtargetYsvg
texttexthtml
textAnchortext-anchorsvg
textDecorationtext-decorationsvg
textLengthtextLengthsvg
textRenderingtext-renderingsvg
timelineBegintimelinebeginsvg
titletitlesvg, html
totosvg
topMargintopmarginhtml
transformtransformsvg
transformBehaviortransformBehaviorsvg
transformOrigintransform-originsvg
translatetranslatehtml
typetypesvg, html
typeMustMatchtypemustmatchhtml
typeOftypeofsvg
u1u1svg
u2u2svg
underlinePositionunderline-positionsvg
underlineThicknessunderline-thicknesssvg
unicodeunicodesvg
unicodeBidiunicode-bidisvg
unicodeRangeunicode-rangesvg
unitsPerEmunits-per-emsvg
unselectableunselectablehtml
useMapusemaphtml
vAlignvalignhtml
vAlphabeticv-alphabeticsvg
vHangingv-hangingsvg
vIdeographicv-ideographicsvg
vLinkvlinkhtml
vMathematicalv-mathematicalsvg
vSpacevspacehtml
valuevaluehtml
valueTypevaluetypehtml
valuesvaluessvg
vectorEffectvector-effectsvg
versionversionsvg, html
vertAdvYvert-adv-ysvg
vertOriginXvert-origin-xsvg
vertOriginYvert-origin-ysvg
viewBoxviewBoxsvg
viewTargetviewTargetsvg
visibilityvisibilitysvg
widthwidthsvg, html
widthswidthssvg
wordSpacingword-spacingsvg
wrapwraphtml
writingModewriting-modesvg
writingSuggestionswritingsuggestionshtml
xxsvg
x1x1svg
x2x2svg
xChannelSelectorxChannelSelectorsvg
xHeightx-heightsvg
xLinkActuatexlink:actuatexlink
xLinkArcRolexlink:arcrolexlink
xLinkHrefxlink:hrefxlink
xLinkRolexlink:rolexlink
xLinkShowxlink:showxlink
xLinkTitlexlink:titlexlink
xLinkTypexlink:typexlink
xmlBasexml:basexml
xmlLangxml:langxml
xmlSpacexml:spacexml
xmlnsxmlnsxmlns
xmlnsXLinkxmlns:xlinkxmlns
yysvg
y1y1svg
y2y2svg
yChannelSelectoryChannelSelectorsvg
zzsvg
zoomAndPanzoomAndPansvg
<!--list end-->

Security

This package is safe.

Related

Contribute

Yes please! See How to Contribute to Open Source.

License

MIT © Titus Wormer

Derivative work based on React licensed under MIT, © Facebook, Inc.