This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Andreas Wahlström
Posted Jul 19 - Read on Facebook

Hi! Just wrote a module that makes it easier to work with text inside Framer.js. Let me know what you think!
https://github.com/awt2542/textLayer-for-Framer

22 Comments

Josef Richter

Cool! Can it do auto-height? That would be super useful.

Andreas Wahlström

Josef Richter try layer.autoSize = true and see if that works for you. It automatically scales the layer to make room for the content.

Randi Dumaguet

Awesome and super useful! 😊

Johannes Eckert

#framercode

Jens Nikolaus

fuck yeah

Johannes Eckert

Awesome. When using a text layer, just setting its style.contentEditable to true makes it a text input box

Blaine Billingsley

dope

Andreas Wahlström

great idea Johannes Eckert. just pushed an update with contentEditable as a property. now you can just use layer.contentEditable = true. included a fix to make it work inside Framer Studio, too :)

Andreas Wahlström

Josef Richter I've added a separate .autoSizeHeight property. Now you can make fixed width columns with variable heights. Great for lists. See example: http://share.framerjs.com/a4tscclssj5j/

Paul Wan

Great done!

Johannes Eckert

Is there a way to add in a line break, like <br> or \n — these characters are encoded, which probably makes a lot of sense, unless you want a new line of text

Jordan Robert Dobson

So great!

Andreas Wahlström

Johannes Eckert fixed! .text is now just a syntactic sugar for .html. should work nicely with <br>, <strong> and other tags

Johannes Eckert

thanks, andreas!

Adria Jimenez

Very nice! Something I've been looking for :)
For just text inputs I created this one some time ago
https://github.com/ajimix/Input-Framer

Andreas Wahlström

Adria Jimenez yeah -I borrowed the setup property to keep things consistent with your module. :)

Randi Dumaguet

Hello guys,
If I make use the layer.contentEditable = true, would that mean that a keyboard opens up when that layer is in focus? Or do we have to manually open the keyboard? I tried using it but I can't seem to edit the text... Maybe I'm missing something?

Randi Dumaguet

LOL nevermind guys... I used = instead of : haha and there I was trying to solve the issue for 30 minutes already... silly!

João Pedro Monteiro Amaro

Hi, I love this module, but when I tried to use custom fonts and preview using frameless it defaults to a serif font, is there something I might be doing wrong

Joshua Bradley

Andreas Wahlström What do you mean about .text as a syntactic sugar for .html? I'm trying to get <br> to create line breaks, but no luck

Joshua Bradley

oh got it, you have to use \n

Andreas Wahlström

I changed it back since it created some issues. I think you can still use .html though.

Read the entire post on Facebook