Input-Framer 0,0

Framer module to easily turn your designs inputs into real inputs.

2 years after MIT


Framer module to easily turn your designs inputs into real inputs.

Input Demo

Add it in your Framer Studio project

  • Download the project from github.
  • Copy and keyboard.png into modules/ folder.
  • Import it in Framer Studio by writing: InputModule = require "input".

Note: keyboard.png is prepared for iPhone 6. If you want to use a different size, replace with your own image.

How to use it

Export your assets as you would do normally, then create an input object and place it over your designed input. Done!
Remember that all parameters are optional.

input = new InputModule.Input
    setup: false # Change to true when positioning the input so you can see it
    virtualKeyboard: true # Enable or disable virtual keyboard for when viewing on computer
    text: "Some text" # Remove this if you don't want to have text initially
    placeholder: "Username"
    placeholderColor: "#fff"
    type: "text" # Use any of the available HTML input types. Take into account that on the computer the same keyboard image will appear regarding the type used.
    y: 240
    x: 90
    width: 500
    height: 60
    goButton: false # Set true here in order to use "Go" instead of "Return" as button (only works on real devices)

Styling your input = 
    fontSize: "30px"
    lineHeight: "30px"
    padding: "10px"
    color: "white"

Retrieving value of your input

You can access directly to .value property to get the value. For example to get the value on each key up you could do something like this...

input.on "keyup", ->
    print @value

Focusing the input via code

Imagine that you want to focus the input once you click "myButton", here is an example:

myButton.on Events.Click, ->

Focus and Blur events

You can add your own custom actions using the onFocus and onBlur helpers.

input.onFocus ->
    print "Input is focused and has the value: #{@value}"

input.onBlur ->
    print "Input lost focus"

[Advanced] Accessing original elements

The input layer is constructed of a form and an input field. You can always access those elements by accessing directly to the properties input and form.


someNiceInput.form.addEventListener "submit", ->
    print "The form was submitted"

Usage Example

Here you can find a nice project which combines this module with other modules to create a realtime chat app prototype using Firebase: FramerJS-Firebase-Demo

Related Repositories



Framer.js module that simplifies the process of adding text to your prototypes. ...



TeamTreeHouse's Weekly show notes ...



A collection of awesome things related to Framer.js prototyping tool ...



A web viewer for Framer.JS prototypes ...

Top Contributors



-   1.3.0 zip tar
-   1.2.1 zip tar
-   1.2.0 zip tar
-   1.1.0 zip tar
-   1.0.0 zip tar