Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.






                //Calling a function without await keyword
// Multiple Callback => Promise => async/await
// which means async/await used to Simply the Promise chains not replace of promise

//async keyword used before function declaration, it always return a promise
// await expression causes async function execution to pause until a promise is settled(fullfilled or rejected) 
const f2 = () => 1
console.log("Returning a value:", f2())

const f3 = async () => 1 
console.log("Returning a promise:", f3())

const fn = val => new Promise((resolve, reject) => {
  setTimeout(() => {
      return resolve(val)
  }, 1000)


const f4 = async () => { 
    // return a promise in a time interval
    return new Promise((resolve, reject) => {
        setTimeout(() => {
        }, 2000)

const fnWithoutawait = async () => {
    const output = f4()
    console.log("OutPut printed before the promise resolved: ", output)

//Calling a function with await keyword
const awaitfn = async () => {
    const output = await f4()
    console.log("OutPut Printed after promised resolved because of await: ", output)

    //To Simply this f4 will return a promise and did the same thing


// In the promiseWay every then will wait for the resolve state of the promise
const promiseWay = async () => {
    //This promise chains runs ASynchronously
    fn(10).then(res => increment(res)).then(res => increment(res)).then(res => increment(res)).then(console.log)
    //This will running Synchronously
    console.log("is this really run in Asynchronous way? No ")

const increment = async resValue => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(resValue + 10)


// In the awaitWay every await will wait for the resolve state of the promise
const awaitWay = async () => {
    const v1 = await fn(10)
    const v2 = await increment(v1)
    const v3 = await increment(v2)
    const v4 = await increment(v3)
    console.log("Print the awaitWay value:", v4)
    //This will running ASynchronously
    console.log("is this really run in Asynchronous way? Yes ")