SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 .highlight pre code {6 color: #637c84;7}8 9.highlight {10 color: #333333;11 background: #f8f5ec;12}13 14.highlight .c {15 color: #93a1a1;16}17 18 19.highlight .g {20 color: #637c84;21}22 23/* Generic */24 25.highlight .k {26 color: #859900;27}28 29/* Keyword */30 31.highlight .l {32 color: #637c84;33}34 35/* Literal */36 37.highlight .n {38 color: #637c84;39}40 41/* Name */42 43.highlight .o {44 color: #859900;45}46 47/* Operator */48 49.highlight .x {50 color: #cc7a6f;51}52 53/* Other */54 55.highlight .p {56 color: #637c84;57}58 59/* Punctuation */60 61.highlight .cm {62 color: #93a1a1;63}64 65/* Comment.Multiline */66 67.highlight .cp {68 color: #859900;69}70 71/* Comment.Preproc */72 73.highlight .c1 {74 color: #93a1a1;75}76 77/* Comment.Single */78 79.highlight .cs {80 color: #859900;81}82 83/* Comment.Special */84 85.highlight .gd {86 color: #36958e;87}88 89/* Generic.Deleted */90 91.highlight .ge {92 font-style: italic;93 color: #637c84;94}95 96/* Generic.Emph */97 98.highlight .gr {99 color: #dc322f;100}101 102/* Generic.Error */103 104.highlight .gh {105 color: #cc7a6f;106}107 108/* Generic.Heading */109 110.highlight .gi {111 color: #859900;112}113 114/* Generic.Inserted */115 116.highlight .go {117 color: #637c84;118}119 120/* Generic.Output */121 122.highlight .gp {123 color: #637c84;124}125 126/* Generic.Prompt */127 128.highlight .gs {129 font-weight: bold;130 color: #637c84;131}132 133/* Generic.Strong */134 135.highlight .gu {136 color: #cc7a6f;137}138 139/* Generic.Subheading */140 141.highlight .gt {142 color: #637c84;143}144 145/* Generic.Traceback */146 147.highlight .kc {148 color: #cc7a6f;149}150 151/* Keyword.Constant */152 153.highlight .kd {154 color: #268bd2;155}156 157/* Keyword.Declaration */158 159.highlight .kn {160 color: #859900;161}162 163/* Keyword.Namespace */164 165.highlight .kp {166 color: #859900;167}168 169/* Keyword.Pseudo */170 171.highlight .kr {172 color: #268bd2;173}174 175/* Keyword.Reserved */176 177.highlight .kt {178 color: #dc322f;179}180 181/* Keyword.Type */182 183.highlight .ld {184 color: #637c84;185}186 187/* Literal.Date */188 189.highlight .m {190 color: #36958e;191}192 193/* Literal.Number */194 195.highlight .s {196 color: #36958e;197}198 199/* Literal.String */200 201.highlight .na {202 color: #637c84;203}204 205/* Name.Attribute */206 207.highlight .nb {208 color: #b58900;209}210 211/* Name.Builtin */212 213.highlight .nc {214 color: #268bd2;215}216 217/* Name.Class */218 219.highlight .no {220 color: #cc7a6f;221}222 223/* Name.Constant */224 225.highlight .nd {226 color: #268bd2;227}228 229/* Name.Decorator */230 231.highlight .ni {232 color: #cc7a6f;233}234 235/* Name.Entity */236 237.highlight .ne {238 color: #cc7a6f;239}240 241/* Name.Exception */242 243.highlight .nf {244 color: #268bd2;245}246 247/* Name.Function */248 249.highlight .nl {250 color: #637c84;251}252 253/* Name.Label */254 255.highlight .nn {256 color: #637c84;257}258 259/* Name.Namespace */260 261.highlight .nx {262 color: #637c84;263}264 265/* Name.Other */266 267.highlight .py {268 color: #637c84;269}270 271/* Name.Property */272 273.highlight .nt {274 color: #268bd2;275}276 277/* Name.Tag */278 279.highlight .nv {280 color: #268bd2;281}282 283/* Name.Variable */284 285.highlight .ow {286 color: #859900;287}288 289/* Operator.Word */290 291.highlight .w {292 color: #637c84;293}294 295/* Text.Whitespace */296 297.highlight .mf {298 color: #36958e;299}300 301/* Literal.Number.Float */302 303.highlight .mh {304 color: #36958e;305}306 307/* Literal.Number.Hex */308 309.highlight .mi {310 color: #36958e;311}312 313/* Literal.Number.Integer */314 315.highlight .mo {316 color: #36958e;317}318 319/* Literal.Number.Oct */320 321.highlight .sb {322 color: #93a1a1;323}324 325/* Literal.String.Backtick */326 327.highlight .sc {328 color: #36958e;329}330 331/* Literal.String.Char */332 333.highlight .sd {334 color: #637c84;335}336 337/* Literal.String.Doc */338 339.highlight .s2 {340 color: #36958e;341}342 343/* Literal.String.Double */344 345.highlight .se {346 color: #cc7a6f;347}348 349/* Literal.String.Escape */350 351.highlight .sh {352 color: #637c84;353}354 355/* Literal.String.Heredoc */356 357.highlight .si {358 color: #36958e;359}360 361/* Literal.String.Interpol */362 363.highlight .sx {364 color: #36958e;365}366 367/* Literal.String.Other */368 369.highlight .sr {370 color: #dc322f;371}372 373/* Literal.String.Regex */374 375.highlight .s1 {376 color: #36958e;377}378 379/* Literal.String.Single */380 381.highlight .ss {382 color: #36958e;383}384 385/* Literal.String.Symbol */386 387.highlight .bp {388 color: #268bd2;389}390 391/* Name.Builtin.Pseudo */392 393.highlight .vc {394 color: #268bd2;395}396 397/* Name.Variable.Class */398 399.highlight .vg {400 color: #268bd2;401}402 403/* Name.Variable.Global */404 405.highlight .vi {406 color: #268bd2;407}408 409/* Name.Variable.Instance */410 411.highlight .il {412 color: #36958e;413}414 415 416 417 418html{font-family:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-family:proxima-nova,"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;color:#484848;line-height:1.28}p{margin:0 0 10px}.subHeader{font-size:21px;font-weight:200;line-height:30px;margin-bottom:10px}em{font-style:italic}h1,h2,h3,h4,h5,h6{margin:10px 0;font-family:inherit;font-weight:bold;line-height:20px;color:inherit;text-rendering:optimizelegibility}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{font-weight:normal;color:#7b7b7b}h1,h2,h3{line-height:40px}h1{font-size:39px}h2{font-size:31px}h3{font-size:23px}h4{font-size:16px}h5{font-size:14px}h6{font-size:11px}h1 small{font-size:24px}h2 small{font-size:18px}h3 small{font-size:16px}h4 small{font-size:14px}ul,ol{margin:0 0 10px 25px;padding:0}ul ul,ul ol,ol ol,ol ul{margin-bottom:0}li{line-height:20px}a{color:#499735;text-decoration:none}a:hover,a:focus{color:#387529;text-decoration:underline}a:focus{outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.center{text-align:center}input{font-family:inherit}*{box-sizing:border-box;border:none;margin:0;padding:0}html{background:#f9f9f9}.left{float:left}.right{float:right}.container{padding-top:50px;width:100%;background-color:white}.wrap{max-width:960px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}@media (max-width: 960px){.wrap{padding-left:10px;padding-right:10px}}.skinnyWrap{width:690px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px}hr{height:0;border-top:1px solid #ccc;border-bottom:1px solid #eee}ul,li{margin-left:20px}li+li{margin-top:10px}h1 .anchor,h2 .anchor,h3 .anchor,h4 .anchor,h5 .anchor,h6 .anchor{margin-top:-50px;position:absolute}h1:hover .hash-link,h2:hover .hash-link,h3:hover .hash-link,h4:hover .hash-link,h5:hover .hash-link,h6:hover .hash-link{display:inline}.hash-link{color:#aaa;display:none;padding-left:8px}.nav-main{background:#222;color:#fafafa;position:fixed;top:0;height:50px;box-shadow:0 0 5px rgba(0,0,0,0.5);width:100%;z-index:100}.nav-main:after{content:"";display:table;clear:both}@media (max-width: 960px){.nav-main{height:auto}}.nav-main a{color:#e9e9e9;text-decoration:none}.nav-main .nav-site{display:inline-flex;display:-ms-flexbox;flex:1;-ms-flex:1}.nav-main .nav-site li{margin:0}.nav-main .nav-site li>a{box-sizing:content-box;padding:0 10px;line-height:50px;display:inline-block;height:50px;color:#ddd;white-space:nowrap}@media (max-width: 960px){.nav-main .nav-site li>a{display:flex;display:-ms-flex;justify-content:center;align-items:center;padding:0 5px;line-height:inherit}}.nav-main .nav-site li>a:hover{color:#fff}.nav-main .nav-site li>a.active{position:relative;color:#fafafa;background:#333}.nav-main .nav-site li>a.active:after{content:"";position:absolute;bottom:0;left:0;right:0;border-bottom:3px solid #59b941}@media (max-width: 960px){.nav-main .nav-site li>a.active{background:inherit}}@media (max-width: 960px){.nav-main .nav-site .nav-site-item--hidden-sm{display:none}}@media (max-width: 960px){.nav-main .nav-site .nav-site-search{position:absolute;z-index:1;right:0;top:0;margin:0 10px}.nav-main .nav-site .nav-site-search:focus{width:170px}}.nav-main .nav-site-internal{margin:0 0 0 20px}@media (max-width: 960px){.nav-main .nav-site-internal{margin:0}}.nav-main .nav-site-external{float:right;margin:0}@media (max-width: 960px){.nav-main .nav-site-external{position:absolute;top:0;right:55px;float:none}}.nav-main .nav-home{color:#59b941;font-size:24px;line-height:50px;height:50px;display:inline-block}@media (max-width: 960px){.nav-main .nav-home{font-size:20px}}.nav-main .nav-logo{vertical-align:middle;display:inline-block}@media (max-width: 960px){.nav-main .nav-logo{height:30px;width:auto}}.nav-main ul{display:inline-block;vertical-align:top}.nav-main li{display:inline}.nav-lists{display:inline-block;vertical-align:top;width:calc(100% - 120px)}@media (max-width: 960px){.nav-lists{display:flex;display:-ms-flex;width:calc(100% + 20px);margin:0 -10px;font-size:0.9em}.nav-lists li{display:flex;display:-ms-flex;-ms-flex:1 0 auto;align-items:center}.nav-lists li a{-ms-flex:1;text-align:center;line-height:1.2}}.hero{min-height:300px;background:#2d2d2d;padding-top:50px;color:#e9e9e9;font-weight:300}.hero .text{font-size:64px;text-align:center}.hero .minitext{font-size:16px;text-align:center;text-transform:uppercase}.hero strong{color:#59b941;font-weight:400}.buttons-unit{display:flex;display:flex;justify-content:center;flex-wrap:wrap;margin-top:60px;text-align:center;font-size:1em}.buttons-unit a{color:#59b941}.buttons-unit .button{font-size:24px;background:#59b941;color:#fafafa}.buttons-unit .button:active{background:#50a63a}@media (max-width: 960px){.buttons-unit .button{margin:5px;font-size:1em}}.buttons-unit.downloads{margin:30px 0}.nav-docs{color:#2d2d2d;font-size:14px;float:left;width:210px}@media (max-width: 640px){.nav-docs{width:100%;padding-bottom:40px}}.nav-docs ul{list-style:none;margin:0}.nav-docs ul ul{margin:0 0 6px 20px}.nav-docs li{line-height:16px;margin:0 0 6px}.nav-docs h3{text-transform:uppercase;font-size:14px}.nav-docs a{color:#666;display:block}.nav-docs a:hover{text-decoration:none;color:#59b941}.nav-docs a.active{color:#59b941}.nav-docs a.external:after{content:"";display:inline-block;width:10px;height:10px;padding-left:5px;background-image:url("../img/external.png");background-position:100% 0;background-repeat:no-repeat;font-size:10px;line-height:1em;opacity:0.5}@media only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 1.3 / 1), only screen and (min-resolution: 125dpi), only screen and (min-resolution: 1.3dppx){.nav-docs a.external:after{background-image:url("../img/external_2x.png");background-size:10px 10px}}.nav-docs .nav-docs-section{border-bottom:1px solid #ccc;border-top:1px solid #eee;padding:12px 0}.nav-docs .nav-docs-section:first-child{padding-top:0;border-top:0}.nav-docs .nav-docs-section:last-child{padding-bottom:0;border-bottom:0}@media (max-width: 640px){.nav-docs .nav-docs-section>ul{columns:2}}@media (max-width: 480px){.nav-docs .nav-docs-section>ul{columns:1}}.nav-docs .nav-docs-section>ul li{margin:0}.nav-docs .nav-docs-section>ul li a{padding:0;line-height:1.6}.nav-blog li{margin-bottom:5px}.home-section{margin:50px 0}.home-divider{border-top-color:#bbb;margin:0 auto;width:100%;max-width:400px}.skinny-row:after{content:"";display:table;clear:both}.skinny-col{float:left;margin-left:40px;width:305px}.skinny-col:first-child{margin-left:0}.marketing-row{margin:50px 0}.marketing-row:after{content:"";display:table;clear:both}.marketing-col{float:left;margin-left:40px;width:280px}@media (max-width: 960px){.marketing-col{margin:0;width:100%}}.marketing-col h3{color:#2d2d2d;font-size:24px;line-height:28px;font-weight:normal}.marketing-col p{font-size:16px}.marketing-col:first-child{margin-left:0}#overview h3,.home-presentation h3{color:#2d2d2d;font-size:24px;font-weight:normal;margin-bottom:5px}#overview p{margin:0 0 25px 0}#overview .overview-section{margin-top:60px}.home-bottom-section{margin-bottom:100px}.docs-nextprev:after{content:"";display:table;clear:both}.jsxCompiler{margin:0 auto;padding-top:20px;width:1220px}.jsxCompiler label.compiler-option{display:block;margin-top:5px}.jsxCompiler #jsxCompiler{margin-top:20px}.jsxCompiler .playgroundPreview{padding:0;width:600px;word-wrap:break-word}.jsxCompiler .playgroundPreview pre{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.jsxCompiler .playgroundError{padding:15px 20px}.docs-prev{float:left}.docs-next{float:right}section.black content{padding-bottom:18px}.blogContent{padding-top:20px;padding-bottom:80px}.blogContent:after{content:"";display:table;clear:both}@media (max-width: 640px){.blogContent{padding-bottom:0}}.blogContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.blogContent h2>code{font-size:inherit;line-height:inherit;color:#555;background-color:rgba(0,0,0,0.04)}.documentationContent{padding-top:20px;padding-bottom:80px}.documentationContent:after{content:"";display:table;clear:both}.documentationContent .subHeader{font-size:24px}.documentationContent h2{margin-top:30px}@media (max-width: 640px){.documentationContent{padding-bottom:0}}.documentationContent blockquote{padding:15px 30px 15px 15px;margin:20px 0;background-color:rgba(248,245,236,0.5);border-left:5px solid rgba(191,87,73,0.2)}.documentationContent blockquote h4{margin-top:0}.documentationContent blockquote p{margin-bottom:0}.documentationContent blockquote p:first-child{font-weight:bold;font-size:17.5px;line-height:20px;margin-top:0;text-rendering:optimizelegibility}.docs-prevnext{padding-top:40px;padding-bottom:40px}.button{background:linear-gradient(#9a9a9a, #646464);border-radius:4px;padding:8px 16px;font-size:18px;font-weight:400;margin:0 12px;display:inline-block;color:#fafafa;text-decoration:none;text-shadow:0 1px 3px rgba(0,0,0,0.3);box-shadow:0 1px 1px rgba(0,0,0,0.2);text-decoration:none}.button:hover{text-decoration:none}.button:active{box-shadow:none}.home .button{box-shadow:1px 3px 3px rgba(0,0,0,0.3)}.button.blue{background:linear-gradient(#77a3d2, #4783c2)}.row{padding-bottom:4px}.row .span4{width:33.33%;display:table-cell}.row .span8{width:66.66%;display:table-cell}.row .span6{width:50%;display:table-cell}p{margin:10px 0}.highlight{padding:10px;margin-bottom:20px}figure{text-align:center}.content{font-size:15px}.inner-content{float:right;width:100%;max-width:650px;font-size:15px}@media (max-width: 960px){.inner-content{width:calc(100% - 240px);max-width:100%}}@media (max-width: 640px){.inner-content{width:100%}}.nosidebar .inner-content{float:none;margin:0 auto}h1:after{content:"";display:table;clear:both}.edit-page-link{float:right;font-size:16px;font-weight:normal;line-height:20px;margin-top:17px}@media (max-width: 640px){.edit-page-link{float:left;width:100%}}.communityContent{padding-top:20px}.communityContent:after{content:"";display:table;clear:both}.communityContent h3{margin-top:30px}.communityContent blockquote{padding:5px 15px;margin:20px 0;background-color:#f8f5ec;border-left:5px solid #f7ebc6}.communityContent th{padding-right:6px;text-align:right;vertical-align:top;font-weight:normal;font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}.communityContent td{vertical-align:top;text-align:left}.post-list-item+.post-list-item{margin-top:60px}div.CodeMirror pre,div.CodeMirror-linenumber,code{font-family:'source-code-pro', Menlo, Consolas, 'Courier New', monospace;line-height:1.5;font-size:13px;-webkit-text-size-adjust:none}div.CodeMirror-linenumber{text-align:right}.CodeMirror,div.CodeMirror-gutters,div.highlight{border:none}.CodeMirror-readonly div.CodeMirror-cursor{visibility:hidden}small code,li code,p code{color:#555;background-color:rgba(0,0,0,0.04);padding:1px 3px}small a code,li a code,p a code{color:inherit}.cm-s-default span.cm-string-2{color:inherit}.playground:after{content:"";display:table;clear:both}.playground-tab{border-bottom:none !important;border-radius:3px 3px 0 0;padding:6px 8px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;display:inline-block;cursor:pointer}.playgroundCode,.playground-tab,.playgroundPreview{border:1px solid rgba(16,16,16,0.1)}.playground-tab-active{color:#222}.playgroundCode{border-radius:0 3px 3px 3px;float:left;overflow:hidden;width:100%;max-width:600px}.playgroundPreview{background-color:white;border-radius:3px;float:right;padding:15px 20px;width:280px;word-wrap:break-word}.playgroundError{color:#50a63a;font-size:15px}.MarkdownEditor textarea{width:100%;height:100px}.MarkdownEditor .content{white-space:pre-wrap;word-break:break-word}.hll{background-color:#f7ebc6;border-left:5px solid #f7d87c;display:block;margin-left:-14px;margin-right:-14px;padding-left:9px}.highlight .javascript .err{background-color:transparent;color:inherit}.highlight{position:relative;margin-bottom:14px;padding:30px 14px 14px;border:none;border-radius:0;overflow:auto}.highlight pre{padding:0;margin-top:0;margin-bottom:0;background-color:transparent;border:0;float:left;min-width:100%}.highlight pre code{display:block;background:none;padding:0}.highlight pre .lineno{display:inline-block;width:22px;padding-right:5px;margin-right:10px;color:#bebec5;text-align:right}div.highlight:after{position:absolute;top:0;right:0;left:0;padding:3px 7px;font-size:12px;font-weight:bold;color:#c2c0bc;background-color:#f1ede4;content:"Code"}.downloadCenter{text-align:center;margin-top:20px;margin-bottom:25px}.downloadSection:hover{text-decoration:none !important}@media (max-width: 960px){.nav-main{position:relative}.container{padding-top:0}}.post{margin-bottom:30px}.post img{max-width:100%;height:auto}.pagination{margin-bottom:30px;width:100%;overflow:hidden}.pagination .next{float:right}div[data-twttr-id] iframe{margin:10px auto !important;width:100% !important}.fb_iframe_widget{max-width:100%}.fb_iframe_widget *{max-width:100%}@media (max-width: 960px){#twitter-widget-0{display:none !important}}.three-column:after{content:"";display:table;clear:both}.three-column>ul{float:left;margin-left:30px;width:190px}.three-column>ul:first-child{margin-left:20px}input#algolia-doc-search{background:transparent url("/react/img/search.png") no-repeat 10px center;background-size:16px 16px;position:relative;vertical-align:top;margin-left:10px;padding:0 10px;padding-left:35px;height:30px;margin-top:10px;font-size:16px;line-height:20px;background-color:#333;border-radius:4px;color:white;outline:none;width:170px;transition:width .2s ease}input#algolia-doc-search:focus{width:240px}@media (max-width: 960px){input#algolia-doc-search{background-color:transparent;width:0;cursor:pointer}input#algolia-doc-search:focus{width:200px;background-color:#333}}.algolia-autocomplete .aa-dropdown-menu{margin-left:-110px;margin-top:-4px}.algolia-autocomplete{vertical-align:top;height:53px}.algolia-docsearch-suggestion{border-bottom-color:#c05b4d}.algolia-docsearch-suggestion--category-header{background-color:#cc7a6f}.algolia-docsearch-suggestion--highlight{color:#c05b4d}.algolia-docsearch-suggestion--category-header .algolia-docsearch-suggestion--highlight{background-color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion--content{color:#c05b4d}.aa-cursor .algolia-docsearch-suggestion{background:#f1f3f5}footer.nav-footer{box-sizing:border-box;border:none;font-weight:300;color:#202020;font-size:15px;line-height:24px;background:#2D2D2D;box-shadow:inset 0 10px 10px -5px #0d1116;padding-top:2em;padding-bottom:2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}footer .sitemap{display:flex;display:-ms-flexbox;justify-content:space-between;max-width:1080px;margin:0 auto 3em}footer .sitemap div{flex:1;-ms-flex:1}footer .sitemap .nav-home{display:table;margin:-12px 20px 0 0;padding:10px;width:60px;height:60px;transition:opacity 0.15s ease-in-out;background:url("../img/logo_small_gray.png") no-repeat content-box}footer .sitemap .nav-home:hover,footer .sitemap .nav-home:focus{background-image:url("../img/logo_small.png")}@media screen and (max-width: 740px){footer .sitemap{display:none}}footer .sitemap a{color:white;display:table;margin:2px -10px;padding:3px 10px}footer .sitemap a:hover,footer .sitemap a:focus{color:#61dafb;text-decoration:none}footer .sitemap h6>a:hover,footer .sitemap h6>a:focus{color:#61dafb;text-decoration:none}footer .sitemap h5,footer .sitemap h6{margin:0 0 10px}footer .sitemap h5,footer .sitemap h6,footer .sitemap h5>a,footer .sitemap h6>a{color:white}footer .sitemap h5>a,footer .sitemap h6>a{margin:0 -10px}footer .fbOpenSource{display:block;margin:1em auto;opacity:0.4;transition:opacity 0.15s ease-in-out;width:170px}footer .fbOpenSource:hover{opacity:1.0}footer .copyright{color:rgba(255,255,255,0.4);text-align:center}419 </style>420 <meta charset="utf-8">421 <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">422 <title>423 REST Client - ReactXP424 </title>425 <meta content="width=device-width, initial-scale=1" name="viewport">426 <meta content="REST Client - ReactXP" property="og:title">427 <meta content="website" property="og:type">428 <meta content="" property="og:url">429 <meta content="" property="og:image">430 <meta content="A library for cross-platform development" property="og:description">431 </head>432 <body>433 <div class="container">434 <div class="nav-main">435 <div class="wrap">436 <a class="nav-home">437 ReactXP438 </a>439 <div class="nav-lists">440 <ul class="nav-site nav-site-internal">441 <li>442 <a class="active">443 Docs444 </a>445 </li>446 <li>447 <a>448 Community449 </a>450 </li>451 <li>452 <a>453 Versions454 </a>455 </li>456 <li>457 <a>458 Blog459 </a>460 </li>461 </ul>462 <ul class="nav-site nav-site-external">463 <li>464 <a>465 GitHub466 </a>467 </li>468 </ul>469 </div>470 </div>471 </div>472 <section class="content wrap documentationContent">473 <div class="inner-content">474 <h1>475 REST Client476 </h1>477 <div class="subHeader">478 </div>479 <p>480 ReactXP provides basic481 <a>482 Network APIs483 </a>484 for determining network connectivity, but it doesn’t provide ways to access the network once connected.485 </p>486 <p>487 This extension provides a cross-platform mechanism for wrapping a simple REST API. It supports optional retry logic (including exponential backoff).488 </p>489 <p>490 For more details, refer to the491 <a>492 SimpleRestClients493 </a>494 GitHub site.495 </p>496 <p>497 To install:498 <code class="language-plaintext highlighter-rouge">499 npm install simplerestclients500 </code>501 or502 <code class="language-plaintext highlighter-rouge">503 yarn add simplerestclients504 </code>505 </p>506 <h3 id="sample-usage">507 Sample Usage508 </h3>509 <div class="language-javascript highlighter-rouge">510 <div class="highlight">511 <pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">GenericRestClient</span><span class="p">,</span> <span class="nx">ApiCallOptions</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">simplerestclients</span><span class="dl">'</span><span class="p">;</span>512<span class="k">import</span> <span class="nx">SyncTasks</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="dl">'</span><span class="s1">synctasks</span><span class="dl">'</span><span class="p">);</span>513 514<span class="k">export</span> <span class="kr">interface</span> <span class="nx">User</span> <span class="p">{</span>515 <span class="nl">id</span><span class="p">:</span> <span class="nx">string</span><span class="p">;</span>516 <span class="nl">firstName</span><span class="p">:</span> <span class="nx">string</span><span class="p">;</span>517 <span class="nl">lastName</span><span class="p">:</span> <span class="nx">string</span><span class="p">;</span>518<span class="p">}</span>519 520<span class="k">export</span> <span class="k">default</span> <span class="kd">class</span> <span class="nx">MyRestClient</span> <span class="kd">extends</span> <span class="nx">GenericRestClient</span> <span class="p">{</span>521 <span class="kd">constructor</span><span class="p">(</span><span class="kr">private</span> <span class="nx">_appId</span><span class="p">:</span> <span class="nx">string</span><span class="p">)</span> <span class="p">{</span>522 <span class="k">super</span><span class="p">(</span><span class="dl">'</span><span class="s1">https://myhost.com/api/v1/</span><span class="dl">'</span><span class="p">);</span>523 <span class="p">}</span>524 525 <span class="c1">// Override _getHeaders to append a custom header with the app ID.</span>526 <span class="kr">protected</span> <span class="nx">_getHeaders</span><span class="p">(</span><span class="nx">options</span><span class="p">:</span> <span class="nx">ApiCallOptions</span><span class="p">):</span> <span class="p">{</span> <span class="p">[</span><span class="nx">key</span><span class="p">:</span> <span class="nx">string</span><span class="p">]:</span> <span class="nx">string</span> <span class="p">}</span> <span class="p">{</span>527 <span class="kd">let</span> <span class="nx">headers</span> <span class="o">=</span> <span class="k">super</span><span class="p">.</span><span class="nx">_getHeaders</span><span class="p">(</span><span class="nx">options</span><span class="p">);</span>528 <span class="nx">headers</span><span class="p">[</span><span class="dl">'</span><span class="s1">X-AppId</span><span class="dl">'</span><span class="p">]</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">_appId</span><span class="p">;</span>529 <span class="k">return</span> <span class="nx">headers</span><span class="p">;</span>530 <span class="p">}</span>531 532 <span class="c1">// Define public methods that expose the APIs provided through</span>533 <span class="c1">// the REST service.</span>534 <span class="nx">getAllUsers</span><span class="p">():</span> <span class="nx">SyncTasks</span><span class="p">.</span><span class="nb">Promise</span><span class="o"><</span><span class="nx">User</span><span class="p">[]</span><span class="o">></span> <span class="p">{</span>535 <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">performApiGet</span><span class="o"><</span><span class="nx">User</span><span class="p">[]</span><span class="o">></span><span class="p">(</span><span class="dl">'</span><span class="s1">users</span><span class="dl">'</span><span class="p">);</span>536 <span class="p">}</span>537 538 <span class="nx">getUserById</span><span class="p">(</span><span class="nx">id</span><span class="p">:</span> <span class="nx">string</span><span class="p">):</span> <span class="nx">SyncTasks</span><span class="p">.</span><span class="nb">Promise</span><span class="o"><</span><span class="nx">User</span><span class="o">></span> <span class="p">{</span>539 <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">performApiGet</span><span class="o"><</span><span class="nx">User</span><span class="o">></span><span class="p">(</span><span class="dl">'</span><span class="s1">user/</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">id</span><span class="p">);</span>540 <span class="p">}</span>541 542 <span class="nx">setUser</span><span class="p">(</span><span class="nx">user</span><span class="p">:</span> <span class="nx">User</span><span class="p">):</span> <span class="nx">SyncTasks</span><span class="p">.</span><span class="nb">Promise</span><span class="o"><</span><span class="k">void</span><span class="o">></span> <span class="p">{</span>543 <span class="k">return</span> <span class="k">this</span><span class="p">.</span><span class="nx">performApiPut</span><span class="o"><</span><span class="k">void</span><span class="o">></span><span class="p">(</span><span class="dl">'</span><span class="s1">user/</span><span class="dl">'</span> <span class="o">+</span> <span class="nx">user</span><span class="p">.</span><span class="nx">id</span><span class="p">,</span> <span class="nx">user</span><span class="p">);</span>544 <span class="p">}</span>545<span class="p">}</span>546</code></pre>547 </div>548 </div>549 <div class="docs-prevnext">550 <a class="docs-next">551 Next →552 </a>553 </div>554 </div>555 <div class="nav-docs">556 <!-- Docs Nav -->557 <div class="nav-docs-section">558 <h3>559 Quick Start560 </h3>561 <ul>562 <li>563 <a>564 Getting Started565 </a>566 </li>567 <li>568 <a>569 Using ReactXP570 </a>571 </li>572 <li>573 <a>574 FAQ575 </a>576 </li>577 <li>578 <a>579 React Concepts580 </a>581 </li>582 </ul>583 </div>584 <div class="nav-docs-section">585 <h3>586 Components587 </h3>588 <ul>589 <li>590 <a>591 ActivityIndicator592 </a>593 </li>594 <li>595 <a>596 Button597 </a>598 </li>599 <li>600 <a>601 GestureView602 </a>603 </li>604 <li>605 <a>606 Image607 </a>608 </li>609 </ul>610 </div>611 <div class="nav-docs-section">612 <h3>613 APIs614 </h3>615 <ul>616 <li>617 <a>618 Accessibility619 </a>620 </li>621 <li>622 <a>623 Alert624 </a>625 </li>626 <li>627 <a>628 App629 </a>630 </li>631 <li>632 <a>633 Clipboard634 </a>635 </li>636 </ul>637 </div>638 <div class="nav-docs-section">639 <h3>640 Extensions641 </h3>642 <ul>643 <li>644 <a>645 Database646 </a>647 </li>648 <li>649 <a>650 ImageSvg651 </a>652 </li>653 <li>654 <a>655 Navigator656 </a>657 </li>658 <li>659 <a>660 NetInfo661 </a>662 </li>663 </ul>664 </div>665 </div>666 </section>667 <footer class="nav-footer">668 <section class="sitemap">669 <a class="nav-home">670 </a>671 <div>672 <a>673 Docs674 </a>675 <a>676 Blog677 </a>678 <a>679 Community680 </a>681 </div>682 <div>683 <a target="_blank">684 GitHub685 </a>686 <a target="_blank">687 React688 </a>689 <a target="_blank">690 React Native691 </a>692 </div>693 </section>694 <section class="copyright">695 Copyright © 2023 Microsoft Corp.696 </section>697 </footer>698 </div>699 </body>700</html>701