Using YUI 2 and YUI 3 Together: Even Easier with Caridy's Wrapper Utility

By YUI TeamNovember 19, 2009

Using YUI 2 and YUI 3 together with Caridy's Wrapper Utility

The YUI 3 Gallery got an interesting new addition today: Caridy Patino Mayea's YUI 2 Wrapper Utility. Wrapper allows you to pull in YUI 2 modules from YUI 3 use() statements. Check out Caridy's documentation for the Wrapper here.

How easy? Here's a full example. All that we start with is the 6.2KB (gzip) YUI 3 seed file; Caridy's Wrapper and the built-in YUI 3 Loader take care of the rest:

<script type="text/javascript" src=""></script>

<div id="demo" class="yui-navset">
    <ul class="yui-nav">
        <li><a href="#tab1"><em>Tab One Label</em></a></li>
        <li class="selected"><a href="#tab2"><em>Tab Two Label</em></a></li>
        <li><a href="#tab3"><em>Tab Three Label</em></a></li>
    <div class="yui-content">
        <div id="tab1"><p>Tab One Content</p></div>
        <div id="tab2"><p>Tab Two Content</p></div>
        <div id="tab3"><p>Tab Three Content</p></div>

<script language="javascript">

    modules: {
        'gallery-yui2': {
            fullpath: '',
            requires: ['node-base','get','async-queue'],
            optional: [],
            supersedes: []
}).use('gallery-yui2', function(Y) {
    Y.yui2().use("tabview", function () {
        var myTabs = new YAHOO.widget.TabView("demo");


Check out the YUI 2 Wrapper and many others on the YUI 3 Gallery.